3
テーブルにはヘッダー行が2行、本体行が50行あります。それは20列あります。 テーブルをページ幅内に表示する必要があります（表は100％幅を超えないようにしてください）。つまり、の横スクロールバーが表示されるはずです。 垂直スクロール時にヘッダー行を固定したままにする必要があります。 テーブルの列の幅が異なります。テーブルの幅が設定位置で100％を超えて固定されています
これはこれまで私が行ってきたことです。
2つのテーブルが作成されました。 1つの表のすべてのヘッダー部分、および別の表の本文部分。
異なる列幅を設定する必要があるので、テーブルレイアウトは「固定」です。 両方のテーブルの幅を100％に設定しました。
- スクロールバーが上部テーブル（tab1）に問題を引き起こしていたため、ページ上に垂直スクロールバーが表示されました。これは、コンテンツが画面の高さを超えてしまうため、問題ではありません。
Iは、上部テーブルのposition: fixedを設定すると、それは2つのテーブル間のアライメントの問題を引き起こします。 position：fixedプロパティは、上位テーブルを100％以上にします。
テーブルの上部幅を99％に設定すると、一部の解像度の画面では問題なく表示されますが、他の場合（1600×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>
。それらはネストされていません。それらは
それはまだかなり野生の男です、あなたはちょうど水平に積まれたあまりにも多くのコンテンツを持っています。 –
これは私の必要条件です。異なるレイアウトで同じ情報をどのように表現できますか？ –