可滚动的表格主体和固定的标题
[英]Scrollable table body and fixed header
问题描述
我有一个网站，显示一个带有天气数据的简单表格。 我们需要显示许多行，因此我想使主体可滚动，同时保持标题固定。
我已经尝试了多种解决方案，但是它们似乎都与我的表头不兼容（某些头单元格具有子类别）。
我想找到基于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 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td>
<td>3,1</td>
<td>1010</td>
<td>87,1</td>
<td>0,0</td>
</tr>
</tbody>
</table>
3 个解决方案
解决方案1
2 已采纳 2016-07-20 19:43:04
试试这个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 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> </tbody> </table> </div>
解决方案2
0 2016-07-20 19:53:19
您将需要JavaScript来保存/伪造表格布局属性（行/列相互调整）
也许clone() jquery + table-layout:fixed可能是列均匀分布的开始，下面是演示。
$("table thead ").clone().prependTo("table");
table, th, td, th tr { border: 1px solid black; border-collapse: collapse; border-color: #757575; } /* test */ * { box-sizing: border-box; } body { margin: 0; } table, table thead:first-of-type { width: 100%; table-layout: fixed; /* sprays column evenly when no width set */ } table thead:first-of-type { position: fixed; display: table; top: 0; background: white; left: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Aasiaat</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> <tr> <td>Aasiaat</td> <td>20.07 15:00</td> <td>9,3</td> <td></td> <td>2,5 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> </tbody> </table>
这里的主体显示了滚动，但是它可以是一个具有设定高度的div，在这种情况下，请参见下面的演示，这里的内容更加平均和棘手..
$("table thead ").clone().prependTo("table");
table, th, td, th tr { border: 1px solid black; border-collapse: collapse; border-color: #757575; } /* test */ *{box-sizing:border-box; } div { position:relative; width : 700px; padding-right:1em; height:200px; } div div {/* buffer for positionning*/ position:static; padding:0; height:100%; overflow:auto; } table, table thead:first-of-type { width: 100%; table-layout: fixed; /* sprays column evenly when no width set */ } table thead:first-of-type { position: absolute; width: calc(100% - 1em - 1px); display: table; top: 0; background: white; left: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><div> <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 ⇙</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 ⇐</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 ⇙</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 ⇙</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 ⇙</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 ⇙</td> <td>3,1</td> <td>1010</td> <td>87,1</td> <td>0,0</td> </tr> </tbody> </table> </div> </div>
解决方案3
0 2016-07-20 20:11:03
我草拟了一个快速的Codepen供您查看。
这是想法：
删除表头，然后将其替换为模拟表头的固定容器。 给表一个高度，并使溢出滚动。
标记：
<ul class="table-header">
<li>Location</li>
<li>Updated</li>
<li>
Temperature
<ul>
<li>present</li>
<li>wind chill</li>
</ul>
</li>
<li>
Wind
<ul>
<li>speed</li>
<li>max</li>
</ul>
</li>
<li>Air pressure</li>
<li>Relative humidity</li>
<li>Precipitation</li>
</ul>
CSS：
table {
width: 100%;
margin-top: 60px;
overflow: scroll;
max-height: 200px;
}
.table-header {
background-color: white;
position: fixed;
top: 0;
left: 0;
list-style: none;
display: flex;
padding-left: 0;
justify-content: space-around;
width: 100%;
li {
font-size: 1em;
font-weight: 600;
flex-grow: 1;
text-align: center;
}
ul {
display: flex;
list-style: none;
padding-left: 0;
li {
text-align: center;
flex-grow: 1;
}
}
}
这不是完美的，但是您明白了。 您只需要使用flex基础，并使顶部容器看起来像表标题。
具有固定页眉和页脚以及没有固定宽度的可滚动正文的 HTML 表格
[英]HTML table with fixed header and footer and scrollable body without fixed widths
我需要一个带有可滚动主体的固定表头。 我已经尝试了一切，但似乎不起作用
[英]I need a fixed table header with a scrollable body. I have tried everything but it won't seem to work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.