html - 尽管使用了位置 :absolute，但表头并未保持固定

Question

我正在尝试表格标题 - 保持固定，而下面的行 - 应该能够滚动。在尝试 position:absolute 之后，它弄乱了我在表中的标题宽度。当然我遗漏了一些东西，而且我是 CSS 的新手，所以这让它变得更加困难。

我也不想水平滚动，内容必须适合给定的宽度(响应式)，由于行高的增加是可以忍受的

JsFiddle

html

<span class="d-body">
  <table>
        <thead>
        <tr>
            <th><input type="checkbox"/></th>
            <th> Date </th>
            <th> Category </th>
            <th> Details </th>
            <th> Amount </th>
            <th> Action </th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah........................................................................................... </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td> 09-05-2015 </td>
            <td> Household Shopping </td>
            <td> Blah Blah.................................................................................................................. </td>
            <td> 9999 </td>
            <td> Edit </td>
        </tr>
        </tbody>

    </table>
</span>

CSS

.d-body {
    display:block;
    width:100%;
    position:relative;
    text-align:left;
    margin-bottom:15px;
    max-height:300px;
    overflow:auto;
    background:#e6e6e6;
}
.d-body table {
    border-collapse:collapse;
    width:100%;
}

.d-body thead tr {
    border-bottom:2px solid #2b2937;
    width:100%;
    background:#EDEDED;
}
.d-body thead tr:nth-child(1) {
    background:#009A9C;
    margin:0;
    color:#f2f2f2;
}

.d-body th, .d-body td {
    padding:10px 5px;
    text-align:left;
}

.d-body table thead {
    /*position:absolute;*/
    z-index:2;
}

有人能帮忙吗？

Answer 1

我相信没有针对这种内置 HTML 或 CSS 的解决方案。建议您制作一张表格用于数据，一张用于标题。并根据第二张表更改单元格的大小。

您也可以尝试互联网上提供的一些其他框架。