我创建了一个包含3个标题的表,其功能应该是标题将保留在顶部,而内容/数据将在下面滚动,因为它将由服务器填充,我的问题在于标题和相应数据的对齐方式。由于我使用的是Display:内联块或块头,并且数据未对齐,因此我尝试通过添加一些填充来手动完成操作,但是当我调整视口大小时,另一个问题在于头的响应能力更改未正确对齐。以下是我正在工作的代码示例

Jsfiddle链接:https://jsfiddle.net/pynechan/5bxm9n0p/



table {
  width:100%
}

tbody {
    border:1px solid red;
    height:300px;
    overflow:auto;
    display:inline-block;
}

thead {
    background-color:#0c0;
    color:#fff;

}

<h2>Header fixed</h2>
<br/>
<br/>

<table>
    <thead><tr><th>HEADER</th><th>HEADER 2</th><th>HEADER 3</th></tr></thead>

    <tbody>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
        <tr><td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td></tr>
    </tbody>
</table>

最佳答案

您可以尝试以下一种吗?标题将是静态的,而表内容将滚动以使标题保持静态。



 table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

        <table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
      <td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
      <td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>
    <tr>
<td>1. DATA</td><td>1. DATA 2</td><td>1. DATA 3</td>
    </tr>

</table>

10-05 21:06
查看更多