Question

我在桌子上有一个百分比宽度，并且我有一个溢出-y：auto。滚动出现时，表格的宽度将被推卸。如何使表格具有相同的宽度（有或没有滚动）谢谢！

这是我的css：

    html,body{height:99%;}
.table1
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  width:98.1%; 
  height:5%; 
  text-align: box-sizing: border-box; 
  left;table-layout: fixed; 
 }
.table1 td
 { border-collapse: collapse;
  background-color: #EAEAEA;
  border: 1px solid lightgrey;
  padding-left: 3px;
 }
#container
 { overflow-y:auto; 
  height:20%; 
  width:100%;left:0;  
  right:0;
 }

.table2
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  left:0; 
  right:0; 
  min-width:98.1%; 
  box-sizing: border-box;
  table-layout: fixed;
 }
 .table2 tr 
  { height:30px;
  }
.table2 td 
 { margin: 0; 
  border-collapse: collapse;
  border: 1px solid lightgrey; 
  border-top:none; 
  border-right: 1px solid lightgrey;
 }

这是我的HTML：

<html>
  <head>
  </head>

  <body  BGCOLOR="#EAEAEA" TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 >
  <table class ="table1">
    <colgroup>
      <col width="20%"/>
      <col width="50%"/>
      <col width="30%"/>
    </colgroup>
    <tbody>
      <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
      </tr>
    </tbody>
  </table>

  <div id="container">
  <table class="table2" BGCOLOR="WHITE">
    <colgroup>
      <col width="20%"/>
      <col width="50%"/>
      <col width="30%"/>
    </colgroup>
    <tbody>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
      <tr>               
        <td>Name</td>
        <td>Name</td>
        <td>Name</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Answer 1

试试这个：

html,body{height:99%;}
.table1
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  width:calc(100% - 17px);
  height:5%; 
  text-align:left; 
 }
.table1 td
 { border-collapse: collapse;
  background-color: #EAEAEA;
  border: 1px solid lightgrey;
  padding-left: 3px;
 }
#container
 { overflow-y:scroll;
  height:20%; 
  width:100%;left:0;  
  right:0;
 }

.table2
 { margin: 0; 
  padding: 0; 
  border-collapse: collapse; 
  left:0; 
  right:0; 
  width:100%;
      box-sizing: border-box;
  table-layout: fixed;

 }
 .table2 tr 
  { height:30px;
  }
.table2 td 
 { 

  border: 1px solid lightgrey; 
  border-top:none; 
  border-right: 1px solid lightgrey;
 }

您可以在我使用container的{{1}}中看到更改。 width:calc(100% - 17px); Width的{{1}}减少container（滚动的宽度），但我也更改此17px。现在所有的行都将在行中完成：）

overflow-y:scroll;和border-collapse ...以及.table1 td中您不需要.table2 td。

点位于overflow，在本例中为width:calc(100% - XYpx)（滚动条的宽度）

我希望这就是你需要的。

有Fiddle example

更新：

我创建了两个17px函数。首先检查js元素中的滚动条并调整他的container。第二个函数仅用于测试，模拟在这种情况下是否width被更改。

实际上，当您添加更多行时，计数会超过height container，您的表格将会适应。或者也可以调整大小浏览器。

在你的情况下你不需要那个名为height的第二个js函数，它只是用于测试，就像我之前说的那样。

Try this Fiddle now

Answer 2

删除overflow-y:auto;

中的#container 像这样：

#container
{ 
  height:20%; 
  width:100%;
  left:0;  
  right:0;
}

垂直滚动正在改变百分比宽度

2 个答案: