使用不同数量的列固定表格标题＆amp;使用CSS的列宽

Question

如何使用CSS在具有动态列数和不同列宽的表上固定表头？

我意识到这可以通过JavaScript完成，但遗憾的是，我正在开发一个没有JavaScript范围的平台。

是否有符合标准的方法来使用纯CSS实现此目的？

＆＃13;

＆＃13;

table{
  border:1px solid #ccc;
  border-collapse: collapse;
}

table th,
table td{
  border:1px solid #ccc;
  padding:5px 10px;
}

＆＃13;

    <table>
        <thead>
            <tr>
                <th>lorem</th>
                <th>lorem ipsum</th>
                <th>lorem</th>
                <th>lorem ipsum</th>
                <th>lorem ipsum dolor sit</th>
                <th>lorem ipsum</th>
                <th>lorem</th>
                <th>lorem ipsum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
            </tr>
            <tr>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
                <td>lorem</td>
                <td>$lorem</td>
            </tr>
        </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;

Fiddle Here

Answer 1

thead{
  position:fixed;
  background:#fff;
  z-index:0;
}
tbody{
  position:absolute;
  z-index:-999;
  margin-top:30px;
}