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

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

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


当前回答

不需要添加任何插件,CSS可以做这个工作!!

其思想是使每列中所有第一个单元格的位置是绝对的,宽度是固定的。例:

max-width: 125px;
min-width: 125px;
position: absolute;

这将在第一列下面隐藏一些列的某些部分,因此添加一个空的第二列(添加第二个空td),其宽度与第一列相同。

我进行了测试,在Chrome和Firefox中都可以使用。

其他回答

在左列宽度固定的情况下,Eamon Nerbonne提供了最佳解决方案。

在可变宽度左列的情况下,我发现的最佳解决方案是制作两个相同的表,并将一个放在另一个上面。演示:http://jsfiddle.net/xG5QH/6/。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */

.container {
   /* Attach fixed-th-table to this container,
      in order to layout fixed-th-table
      in the same way as scolled-td-table" */
   position: relative;

   /* Truncate fixed-th-table */
   overflow: hidden;
}

.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
   /* Set background to non-transparent color
      because two tables are one above another.
    */
   background: white;
}
.fixed-th-table-wrapper {
   /* Make table out of flow */
   position: absolute;
}
.fixed-th-table-wrapper th {
    /* Place fixed-th-table th-cells above 
       scrolled-td-table td-cells.
     */
    position: relative;
    z-index: 1;
}
.scrolled-td-table-wrapper td {
    /* Place scrolled-td-table td-cells
       above fixed-th-table.
     */
    position: relative;
}
.scrolled-td-table-wrapper {
   /* Make horizonal scrollbar if needed */
   overflow-x: auto;
}


/* Simulating border-collapse: collapse,
   because fixed-th-table borders
   are below ".scrolling-td-wrapper table" borders
*/

table {
    border-spacing: 0;
}
td, th {
   border-style: solid;
   border-color: black;
   border-width: 1px 1px 0 0;
}
th:first-child {
   border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
   border-bottom-width: 1px;
}

/* Unimportant styles */

.container {
    width: 250px;
}
td, th {
   padding: 5px;
}
</style>
</head>

<body>
<div class="container">

<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
     - same as fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

</div>
</body>
</html>

下面是对最流行答案的另一种修改,但在第一列标签中处理了可变长度的文本: http://jsfiddle.net/ozx56n41/

基本上,我用第二列来创建行高,就像前面提到的。但我的小提琴实际上不像上面提到的那样。

HTML:

<div id="outerdiv">
    <div id="innerdiv">
        <table>
            <tr>
                <td class="headcol"><div>This is a long label</div></td>
                <td class="hiddenheadcol"><div>This is a long label</div></td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol"><div>Short label</div></td>
                <td class="hiddenheadcol"><div>Short label</div></td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
        </table>
    </div>
</div>

CSS:

body {
    font: 16px Calibri;
}
#outerdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 1px solid grey;
}
#innerdiv {
    overflow-x: scroll;
    margin-left: 100px;
    overflow-y: visible;
    padding-bottom: 1px;
}
table {
    border-collapse:separate;
}
td {
    margin: 0;
    border: 1px solid grey;
    border-top-width: 0;
    border-left-width: 0px;
    padding: 10px;
}
td.headcol {
    /* Frozen 1st column */
    position: absolute;
    left: 0;
    top: auto;
    border-bottom-width: 1px;
    padding: 0;
    border-left-width: 1px;
}
td.hiddenheadcol {
    /* Hidden 2nd column to create height */
    max-width: 0;
    visibility: hidden;
    padding: 0;
}
td.headcol div {
    /* Text container in the 1st column */
    width: 100px;
    max-width: 100px;
    background: lightblue;
    padding: 10px;
    box-sizing: border-box;
}
td.hiddenheadcol div {
    /* Text container in the 2nd column */
    width: 100px;
    max-width: 100px;
    background: red;
    padding: 10px;
}
td.long {
    background:yellow;
    letter-spacing:1em;
}

你可以使用粘性位置。 下面是一个示例代码。这是HTML/CSS解决方案。不需要js。

.view { margin: auto; width: 600px; } .wrapper { position: relative; overflow: auto; border: 1px solid black; white-space: nowrap; } .sticky-col { position: -webkit-sticky; position: sticky; background-color: white; } .first-col { width: 100px; min-width: 100px; max-width: 100px; left: 0px; } .second-col { width: 150px; min-width: 150px; max-width: 150px; left: 100px; } <div class="view"> <div class="wrapper"> <table class="table"> <thead> <tr> <th class="sticky-col first-col">Number</th> <th class="sticky-col second-col">First Name</th> <th>Last Name</th> <th>Employer</th> </tr> </thead> <tbody> <tr> <td class="sticky-col first-col">1</td> <td class="sticky-col second-col">Mark</td> <td>Ham</td> <td>Micro</td> </tr> <tr> <td class="sticky-col first-col">2</td> <td class="sticky-col second-col">Jacob</td> <td>Smith</td> <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td> </tr> <tr> <td class="sticky-col first-col">3</td> <td class="sticky-col second-col">Larry</td> <td>Wen</td> <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td> </tr> </tbody> </table> </div> </div>

codeply代码:https://www.codeply.com/p/oZ4NjpvwbO

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

有点晚了,但我确实在为自己尝试解决方案时遇到了这个线程。假设您现在使用的是现代浏览器,我提出了一个使用CSS calc()来帮助保证满足宽度的解决方案。

.table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div>

希望这能帮助到一些人!