可滾動的表格主體和固定的標題
[英]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.