javascript - 可滚动的表格主体和固定的标题

我有一个网站，显示一个带有天气数据的简单表格。我们需要显示很多行，因此我想使主体可滚动，同时保持标题固定。

我尝试了多种解决方案，但似乎都与我的表头不兼容（某些头单元格具有子类别）。

我想找到基于CSS和/或JavaScript的解决方案。引入jQuery或类似工具会使网站变慢（许多用户具有无线电链接或卫星互联网访问权限）。

我已将部分代码复制到JSFiddle

<table>

<thead>
  <tr>
    <th rowspan="2">Location</th>
    <th rowspan="2">Updated</th>
    <th colspan="2">Temperature [°C]</th>
    <th colspan="2">Wind [m/s]</th>
    <th rowspan="2">Air pressure [hPa]</th>
    <th rowspan="2">Relative humidity [%]</th>
    <th rowspan="2">Precipitation [mm]</th>
  </tr>
  <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr>
</thead>
<tbody>
  <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Angisoq</td>
    <td>20.07 15:00</td>
    <td>5,9</td>
    <td></td>
    <td>3,6 &#8656;</td>
    <td>4,6</td>
    <td>1013</td>
    <td>85,0</td>
    <td>n/a</td>
  </tr>
    <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
   <tr>
    <td>Test3</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Test4</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
    <tr>
    <td>Test5</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
 </tbody>
</table>

最佳答案

试试这个CSS：

.table-container {
    height: 20em;
    width:100%
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires,
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}

<div class="table-container">
<table>

<thead>
  <tr>
    <th rowspan="2">Location</th>
	<th rowspan="2">Updated</th>
    <th colspan="2">Temperature [°C]</th>
	<th colspan="2">Wind [m/s]</th>
	<th rowspan="2">Air pressure [hPa]</th>
	<th rowspan="2">Relative humidity [%]</th>
	<th rowspan="2">Precipitation [mm]</th>
  </tr>
  <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr>
</thead>
<tbody>
  <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Angisoq</td>
    <td>20.07 15:00</td>
    <td>5,9</td>
    <td></td>
    <td>3,6 &#8656;</td>
    <td>4,6</td>
    <td>1013</td>
    <td>85,0</td>
    <td>n/a</td>
  </tr>
    <tr>
    <td>Aasiaat</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
   <tr>
    <td>Test3</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
  <tr>
    <td>Test4</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
    <tr>
    <td>Test5</td>
    <td>20.07 15:00</td>
    <td>9,3</td>
    <td></td>
    <td>2,5 &#8665;</td>
    <td>3,1</td>
    <td>1010</td>
    <td>87,1</td>
    <td>0,0</td>
  </tr>
 </tbody>
</table>

</div>

关于javascript - 可滚动的表格主体和固定的标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38488504/