标题始终位于顶部时，滚动表格正确对齐

时间：2018-04-12 11:13:12

标签： jquery css html5

我创建了一个包含3个标题的表，功能应该是标题将保持在顶部，而内容/数据将在下面滚动，因为它将由服务器填充我的问题在于标题上的对齐和相应的数据。因为我正在使用显示：内联阻止或阻止标题并且数据没有对齐在一起我试图通过添加一些填充来手动执行它但另一个问题在于响应性我调整视图端口大小时的标题，更改无法正确对齐。以下是我正在使用的代码示例

Jsfiddle Link ：https://jsfiddle.net/pynechan/5bxm9n0p/

＆＃13;
＆＃13; 
table {
  width:100%
}

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

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

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

删除display中的tbody属性可解决此问题。 

tbody {
  border: 1px solid red;
  height: 300px;
  overflow: auto;
}

答案 1 :(得分：0)

继承人我想出的

＆＃13;
＆＃13; 
table {
  width:100%
}

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

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

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你能试试下面的吗？标题将是静态的，而表内容滚动保持标题以静态方式。

＆＃13;
＆＃13; 
 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;
}
＆＃13; 
        <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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

To scroll tbody, change it to block level element i.e. display:block;

To keep behavior of table, change it to table i.e. display: table;

Finally use table-layout:fixed to spray evenly the cells

Here is what i changed:

tbody {
    display:block;
    max-height:160px;
    overflow-y:scroll;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
相关问题
最新问题