CSS固定左列

Question

我已经看过这个主题how do I create an HTML table with fixed/frozen left column and scrollable body?，我试着去适应，但我经常失败，因为我使用thead和tbody标签，没有任何例子。

thead由月份的几天组成，tbody有雇主名字。

<table> 
    <thead> 
    <tr> 
     <th></th> 
     <th>01 July</th> 
     <th>02 July</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Employee 1</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>Employee 2</td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tbody> 
</table> 

我需要的是包含用人单位的名称，而水平滚动要固定的td。

JSFiddle example

Answer 1

请检查下面的代码实现这一点（使用完全相同你已经在你的问题中给出的标记）。

th, td { 
 
\t white-space: nowrap; border:1px solid #ccc; padding:5px 0; 
 
} 
 

 
.first-col { 
 
    position: absolute; 
 
\t width: 5.6em; 
 
\t margin-left: -5.7em; background:#ffffff; 
 
} 
 

 
.table-wrapper { 
 
    overflow-x: scroll; 
 
\t width: 430px; 
 
\t margin: 0 0 0 5.3em; 
 
}

<div class="container"> 
 
    <div class="table-wrapper"> 
 
     <table class="table table-bordered table-striped table-hover" cellpadding="0" cellspacing="0"> 
 
      <thead> 
 
       <tr> 
 
        <th class="first-col">&nbsp;</th> 
 
        <th>Table heading1</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
\t \t \t \t \t <th>Table heading</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
        <th>Table heading</th> 
 
\t \t \t \t \t <th>Table heading</th> 
 
\t \t \t \t \t <th>Table heading</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td class="first-col">Employee1</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
\t \t \t \t \t <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
       </tr> 
 
       <tr> 
 
        <td class="first-col">Employee2</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
\t \t \t \t \t <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

难道这要你想要的吗？

Answer 2

您可以通过使用position:fixed

table { 
 
position: relative; 
 
left: -10px; 
 
} 
 

 
thead tr th:nth-of-type(1), 
 
tbody tr td:nth-of-type(1) { 
 
display: block; 
 
position: fixed; 
 
z-index: 6; 
 
width: 100px; 
 
height: 20px; 
 
background-color: rgb(255,255,255); 
 
} 
 

 
th, td:nth-of-type(n+2) { 
 
min-width: 80px; 
 
text-align:center; 
 
} 
 

 
th:nth-of-type(2), 
 
td:nth-of-type(2) { 
 
padding-left: 104px; 
 
}

<table class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>01 July</th> 
 
     <th>02 July</th> 
 
     <th>03 July</th> 
 
     <th>04 July</th> 
 
     <th>05 July</th> 
 
     <th>06 July</th> 
 
     <th>07 July</th> 
 
     <th>08 July</th> 
 
     <th>09 July</th> 
 
     <th>10 July</th> 
 
     <th>11 July</th> 
 
     <th>12 July</th> 
 
     <th>13 July</th> 
 
     <th>14 July</th> 
 
     <th>15 July</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Employee 1</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td>Vacation</td> 
 
     <td>Vacation</td> 
 
     <td>Vacation</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Employee 2</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td>Vacation</td> 
 
     <td>Vacation</td> 
 
     <td>Vacation</td> 
 
    </tr> 
 
    </tbody> 
 
</table>