Demo Fiddle

Question

我试图用第一个固定行制作表格。我的标记是：

<table>
  <thead>
    ....
  </thead>

  <tbody>
    ...
  </tbody>
</table>

我为overflow设置了max-height和tbody，但滚动并未发生。如果我将display:block添加到tbody，就会发生这种情况，但这样我会得到宽度= tableWidth / 2的tbody，如何制作t display : block和全宽？

Answer 1

如果我正确地想要你想做什么，请尝试下面的内容。

Demo Fiddle

HTML

<table>
    <thead>
        <tr>
            <td>Header1</td>
            <td>Header2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

CSS

table {
    background-color: #aaa;
    width:100%;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
thead > tr, tbody {
    display:block;
}

Answer 2

尝试将下面的CSS放在要修复的行上：

<强> CSS

style="position:fixed;top:0;background:#FFF;"

示例：http://jsfiddle.net/V84PE/1/

Answer 3

您可以使用first-child：

table tr:first-child td {
    position: fixed;
    top: 0;
}

您也可以使用last-child。

更多css功能：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

带有第一个固定行的Html表

3 个答案:

Demo Fiddle