Code
2023-12-15 10:00:01

我如何创建一个固定/冻结左列和可滚动的主体HTML表?

我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:

固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?

但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。

当前回答

//If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute

table tbody {
    position: relative;
}

table thead {
    position: relative;
}

//Make both the first header and first data cells (First column) absolute so that it sticks to the left

table td:first-of-type {
    position: absolute;
}

table th:first-of-type {
    position: absolute;
}

//Move Second column according to the width of column 1 

table td:nth-of-type(2) {
    padding-left: <Width of column 1>;
}

table th:nth-of-type(2) {
    padding-left: <Width of column 1>;
}
2014-03-19 14:05:08

其他回答

如果你在webdeveloper的地狱里，需要让它在IE6上工作，下面是我使用的示例代码:

<html>
<head>
<style type="text/css">
.fixme {
    position: relative;
    left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
    <tr>
        <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
        <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
    </tr>
</table>
</body>
</html>

这可能只适用于IE6，所以在CSS中使用条件注释。

2011-12-08 14:59:33

<div style="max-width: 780px; overflow: scroll;"> <table style=""> <tr> <th style="position: sticky;left:0;background-color:aquamarine;">aaaaaaa</th> <th style="position: sticky;left:111px;background-color:aquamarine;">aaaaaaa</th> <th>aaaaaaa</th> <th>aaaaaaa</th> <th>aaaaaaa</th> <th>aaaaaaa</th> <th>aaaaaaa</th> </tr> <tr> <th style="position: sticky;left:0;background-color:aquamarine;">111111111111</th> <th style="position: sticky;left:111px;background-color:aquamarine;">111111111111</th> <th>111111111111</th> <th>111111111111</th> <th>111111111111</th> <th>111111111111</th> <th>111111111111</th> </tr> </table> </div>

2022-08-06 07:26:20

这是一个有趣的jQuery插件，可以创建固定的标题和/或列。 在演示页面上将固定列切换为true，以查看其实际操作。

2011-01-04 15:31:45

我没有检查这个问题的每个答案，但在分析了大部分答案后，我发现在单元格或头部的多行数据情况下，设计会失败。我使用Javascript来解决这个问题。我希望有人觉得这有帮助。

https://codepen.io/kushagrarora/pen/zeYaoY

var freezeTables = document.getElementsByClassName("freeze-pane"); [].forEach.call(freezeTables, ftable => { var wrapper = document.createElement("div"); wrapper.className = "freeze-pane-wrapper"; var scroll = document.createElement("div"); scroll.className = "freeze-pane-scroll"; wrapper.appendChild(scroll); ftable.parentNode.replaceChild(wrapper, ftable); scroll.appendChild(ftable); var heads = ftable.querySelectorAll("th:first-child"); let maxWidth = 0; [].forEach.call(heads, head => { var w = window .getComputedStyle(head) .getPropertyValue("width") .split("px")[0]; if (Number(w) > Number(maxWidth)) maxWidth = w; }); ftable.parentElement.style.marginLeft = maxWidth + "px"; ftable.parentElement.style.width = "calc(100% - " + maxWidth + "px)"; [].forEach.call(heads, head => { head.style.width = maxWidth + "px"; var restRowHeight = window .getComputedStyle(head.nextElementSibling) .getPropertyValue("height"); var headHeight = window.getComputedStyle(head).getPropertyValue("height"); if (headHeight > restRowHeight) head.nextElementSibling.style.height = headHeight; else head.style.height = restRowHeight; }); }); @import url("https://fonts.googleapis.com/css?family=Open+Sans"); * { font-family: "Open Sans", sans-serif; } .container { width: 400px; height: 90vh; border: 1px solid black; overflow: hidden; } table, th, td { border: 1px solid #eee; } .table { width: 100%; margin-bottom: 1rem; table-layout: fixed; border-collapse: collapse; } .freeze-pane-wrapper { position: relative; } .freeze-pane-scroll { overflow-x: scroll; overflow-y: visible; } .freeze-pane th:first-child { position: absolute; background-color: pink; left: 0; top: auto; max-width: 40%; } <div class="container"> <table class="freeze-pane"> <tbody> <tr> <th> <p>Model</p> </th> <th> <p>Mercedes Benz AMG C43 4dr</p> </th> <th> <p>Audi S4 Premium 4dr</p> </th> <th> <p>BMW 440i 4dr sedan</p> </th> </tr> <tr> <th> <p>Passenger capacity</p> </th> <td> <p>5</p> </td> <td> <p>5</p> </td> <td> <p>5</p> </td> </tr> <tr> <th> <p>Front (Head/Shoulder/Leg) (In.)</p> </th> <td> <p>37.1/55.3/41.7</p> </td> <td> <p>38.9/55.9/41.3</p> </td> <td> <p>39.9/54.8/42.2</p> </td> </tr> <tr> <th> <p>Second (Head/Shoulder/Leg) (In.)</p> </th> <td> <p>37.1/55.5/35.2</p> </td> <td> <p>37.4/54.5/35.7</p> </td> <td> <p>36.9/54.3/33.7</p> </td> </tr> </tbody> </table> </div>

注意:“container”div只是为了演示代码与mobile-view兼容。

2019-01-23 08:04:12

Eamon Nerbonne，我在你的代码中改变了一些css，现在它更好了(滚动条从第一行开始)

http://jsfiddle.net/At8L8/

我只是加了两行:

.div : padding-left:5em;
.headcol : background-color : #fff;
2014-07-25 08:30:19

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1