html - 将位置设置为固定时，表格宽度超过 100%

Question

我的表格有 2 个标题行和 50 个正文行。它有 20 列。 我需要在页面宽度内显示表格(表格不应超过 100% 宽度)，这样用户就不必向右滚动，即 不应出现水平滚动条。 垂直滚动时，标题行必须保持固定。 表格列的宽度不同。

这就是我到目前为止所做的。

• 创建了 2 个表。所有表头部分在一个表中，正文部分在另一个表中。

• 表格布局是“固定的”，因为我必须设置不同的列宽。 两个表格宽度我都设置为 100%。

• 滚动条导致上表 (tab1) 出现问题，因此我在页面上强制使用垂直滚动条。这不是问题，因为无论如何内容都会超出屏幕高度。

当我为上表设置 position: fixed 时，会导致两个表之间出现对齐问题。 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>
                                          

Answer 1

首先，这是一个非常紧凑的结构。那么多嵌套的 col 元素有什么意义？ Imo，那是你的问题的一半。

其次，您不能为一个表格提供一堆列并期望它在所有分辨率下都适合屏幕宽度。这类似于试图违反基本物理定律；空间有限，您不能指望它能容纳这么宽的 table 。