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>