3
我的表格有2個標題行和50個正文行。它有20列。 我需要在頁面寬度內顯示錶格（表格不應超過100％寬度），以便用戶不必滾動到右側，即不應出現水平滾動條。 當垂直滾動標題行必須保持固定。 表格欄的寬度不同。將位置設置爲固定時，表格寬度超過100％
這是我迄今爲止所做的。
創建2個表格。一個表中的所有標題部分，另一個表中的主體部分。
表格佈局是「固定的」，因爲我必須設置不同的列寬。 這兩個表格的寬度都設置爲100％。
- 滾動條導致問題到上表（tab1），所以我強制頁面上的垂直滾動條。這不是問題，因爲內容無論如何都超出屏幕高度。
當我設置position: fixed對於上工作臺，它會導致在兩個表之間的對準問題。 職位：固定財產使上表超過100％。
如果我將上表寬度設置爲99％，則對於某些分辨率屏幕而言顯示正常，但對於其他分辨率（高於1600 X 900），則會再次出現錯位。
以下是我的代碼。
html {
overflow-y: scroll;
}
#tab1 {
table-layout: fixed;
width: 100%;
word-wrap: break-word;
position: fixed;
}
#tab2 {
table-layout: fixed;
width: 100%;
word-wrap: break-word;
}<table border="1" id="tab1">
<caption>Test Report Dt - 12/12/2016</caption>
<colgroup>
<col style="width:130px;">
<col style="width:70px; ">
<col style="width:180px;">
<col style="width:100px;">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:90px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:90px; ">
<col style="width:120px;">
<col style="width:70px; ">
<col style="width:70px; ">
</colgroup>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th colspan="7">BAT Tool</th>
<th colspan="7">ACT Tool</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Project Name</th>
<th>Build Version</th>
<th>Test Owner</th>
<th>Test Date DD-MMM-YY</th>
<th>TC Executed</th>
<th>Passed Count</th>
<th>Failed Count</th>
<th>Pass %</th>
<th>Fail %</th>
<th>Automation % coverage</th>
<th>Remarks</th>
<th>TC Executed</th>
<th>Passed Count</th>
<th>Failed Count</th>
<th>Hold Count</th>
<th>Pass %</th>
<th>Fail%</th>
<th>Remark</th>
<th>Other Remarks</th>
<th>BAT Report Link</th>
<th>ACT Report Link</th>
</tr>
</table>
<table border="1" id="tab2">
<colgroup>
<col style="width:130px;">
<col style="width:70px; ">
<col style="width:180px;">
<col style="width:100px;">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:90px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:50px; ">
<col style="width:90px; ">
<col style="width:120px;">
<col style="width:70px; ">
<col style="width:70px; ">
</colgroup>
<tr>
<td>Project 1</td>
<td>v 1.1</td>
<td>Daniel Ruth , d.ruth, 1234</td>
<td>12-Dec-16</td>
<td>30</td>
<td>30</td>
<td>0</td>
<td>100%</td>
<td>0%</td>
<td></td>
<td>Remark1</td>
<td>39</td>
<td>35</td>
<td>0</td>
<td>4</td>
<td>91.8%</td>
<td>0%</td>
<td></td>
<td></td>
<td><a target='_blank' href='http://sample1.html'>Link</a></td>
<td><a target='_blank' href='http://sample2.html'>Link</a></td>
</tr>
</table>
即指定各個列寬。而那些不是嵌套的。那些在
它仍然很漂亮，你只是有太多的內容水平堆疊。 –
這是我的要求，我如何在不同的佈局中表示相同的信息。 –