在设定位置至固定时，工作台宽度超出100％

时间：2017-02-13 12:36:40

标签： html css

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

这是我迄今为止所做的事情。

  • 创建了2个表。一个表中的所有标题部分，另一个表中的正文部分。

  • 表布局是＆＃34;固定＆＃34;，因为我必须设置不同的列宽。 两个表格宽度我都设置为100％。

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

当我为上表设置 position: fixed 时，会导致两个表之间出现对齐问题。 位置：固定属性使上表超过100％。

如果我将上表宽度设置为99％，对于某些分辨率屏幕看起来很好，但对于其他分辨率屏幕（高于1600 X 900），它再次未对齐。

以下是我的代码。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

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

其次，你不能给一个表提供一堆列，并期望它适合所有分辨率的屏幕宽度。这类似于试图违反基本的物理定律;那里空间有限，你不能期望它能容纳这么宽的桌子。

答案 1 :(得分：0)

＆＃13;
＆＃13; 
#tab1, #tab2 {
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  table-layout:fixed;
}
＆＃13; 
<table border="1" id="tab1">
    <caption> Test Report  Dt - 12/12/2016</caption>
    <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; ">

    <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">

    <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; ">
    <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题