固定thead和滾動tbody表; thead列適合tbody列

我需要創建一個固定的thead和滾動tbody表。我還需要將這些列適合tbody列。固定thead和滾動tbody表; thead列適合tbody列

例如，我有表是這樣的：

<table> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     aaa 
 
     </th> 
 
     <th> 
 
     aaabbb 
 
     </th> 
 
     <th> 
 
     aaabbbccc 
 
     </th> 
 
     <th> 
 
     aaabbbcccddd 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

你有任何想法，以適應THEAD列TBODY列？

來源

2017-10-11 bigmeister

您可以設置position: fixed爲thead：

* { 
 
    box-sizing: border-box 
 
} 
 

 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0 
 
} 
 

 
th { 
 
    border: 1px solid red 
 
} 
 

 
td { 
 
    border: 1px solid green 
 
} 
 

 
table { 
 
    position: relative; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    margin-top: 21px 
 
} 
 

 
thead { 
 
    position: fixed; 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    background: #fff; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     aaa 
 
     </th> 
 
     <th> 
 
     aaabbb 
 
     </th> 
 
     <th> 
 
     aaabbbccc 
 
     </th> 
 
     <th> 
 
     aaabbbcccddd 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     asdf 
 
     </td> 
 
     <td> 
 
     asdfaaabbb 
 
     </td> 
 
     <td> 
 
     asdfaaa 
 
     </td> 
 
     <td> 
 
     asd 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-10-11 10:41:05 kizoso

希望下面的代碼片段可以幫助你

 .fixed_headers { 
 
\t \t width: 300px; 
 
\t \t table-layout: fixed; 
 
\t \t border-collapse: collapse; 
 
\t \t } 
 
\t \t .fixed_headers th { 
 
\t \t text-decoration: underline; 
 
\t \t } 
 
\t \t .fixed_headers th, 
 
\t \t .fixed_headers td { 
 
\t \t padding: 5px; 
 
\t \t text-align: left; 
 
\t \t width: 100px; 
 
\t \t } 
 
\t \t .fixed_headers thead { 
 
\t \t background-color: #333; 
 
\t \t color: #FDFDFD; 
 
\t \t } 
 
\t \t .fixed_headers thead tr { 
 
\t \t display: block; 
 
\t \t position: relative; 
 
\t \t } 
 
\t \t .fixed_headers tbody { 
 
\t \t display: block; 
 
\t \t overflow: auto; 
 
\t \t width: 100%; 
 
\t \t height: 300px; 
 
\t \t } 
 
\t \t .fixed_headers tbody tr:nth-child(even) { 
 
\t \t background-color: #DDD; 
 
\t \t }

<table class="fixed_headers"> 
 
\t <thead> 
 
\t  <tr> 
 
\t  <th>Name</th> 
 
\t  <th>Color</th> 
 
\t  <th>Description</th> 
 
\t  </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t  <tr> 
 
\t  <td>Apple</td> 
 
\t  <td>Red</td> 
 
\t  <td>These are red.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Pear</td> 
 
\t  <td>Green</td> 
 
\t  <td>These are green.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Grape</td> 
 
\t  <td>Purple/Green</td> 
 
\t  <td>These are purple and green.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Orange</td> 
 
\t  <td>Orange</td> 
 
\t  <td>These are orange.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Banana</td> 
 
\t  <td>Yellow</td> 
 
\t  <td>These are yellow.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Kiwi</td> 
 
\t  <td>Green</td> 
 
\t  <td>These are green.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Plum</td> 
 
\t  <td>Purple</td> 
 
\t  <td>These are Purple</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Watermelon</td> 
 
\t  <td>Red</td> 
 
\t  <td>These are red.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Tomato</td> 
 
\t  <td>Red</td> 
 
\t  <td>These are red.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Cherry</td> 
 
\t  <td>Red</td> 
 
\t  <td>These are red.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Cantelope</td> 
 
\t  <td>Orange</td> 
 
\t  <td>These are orange inside.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Honeydew</td> 
 
\t  <td>Green</td> 
 
\t  <td>These are green inside.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Papaya</td> 
 
\t  <td>Green</td> 
 
\t  <td>These are green.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Raspberry</td> 
 
\t  <td>Red</td> 
 
\t  <td>These are red.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Blueberry</td> 
 
\t  <td>Blue</td> 
 
\t  <td>These are blue.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Mango</td> 
 
\t  <td>Orange</td> 
 
\t  <td>These are orange.</td> 
 
\t  </tr> 
 
\t  <tr> 
 
\t  <td>Passion Fruit</td> 
 
\t  <td>Green</td> 
 
\t  <td>These are green.</td> 
 
\t  </tr> 
 
\t </tbody> 
 
\t </table>

來源

2017-10-11 10:45:40 Wis

當你調整你的表的大小時，例如，100px - 然後我們有水平滾動條，但是它仍然是水平固定的。有什麼辦法讓tad可以水平滾動嗎？ – bigmeister

固定thead和滾動tbody表; thead列適合tbody列

回答

相關問題