Question

我有一个简单的html表，我试图将主体扩展到header / table的末尾。我需要它只有身体的水平滚动和固定标题。

我有一个小提琴，显示了这个问题。

<table border="1" width="100%">
<thead >
<tr>
<th  id="th1"  width="50%">first</th>
<th  id="th2" width="50%" >last</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 530px; overflow-y: scroll">
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>

现在它只扩展了第一个标题。我需要它用滚动扩展表的整个宽度。谢谢

Answer 1

这是由另一个表

创建的固定表头

带滚动的表格主体的第二个表

table{
  border-collapse:collapse;
  width:100%
}
tbody{
   border: 1px solid green;
   table-layout: fixed;
}
div{
  height: 66px; /*adjust table body*/
  overflow-y: scroll
}

<table border="1">
  <thead>
    <tr>
      <th  id="th1" width="39%">first</th>
      <th  id="th2" width="50%" >last</th>
    </tr>
  </thead>
</table>

<div>

<table border=1>
<tbody>
  <tr>  
    <td headers="th1" >Hello</td>
    <td headers="th2" >World</td>
  </tr>
  <tr>
    <td headers="th1" >Hello</td>
    <td headers="th2" >World</td>
  </tr>
  <tr>
    <td headers="th1" >Hello</td>
    <td headers="th2" >World</td>
  </tr>
  <tr>
    <td headers="th1" >Hello</td>
    <td headers="th2" >World</td>
  </tr>
</tbody>
</table>

</div>

带水平滚动的表格不会延伸到标题的末尾

1 个答案: