不消耗定义宽度的滚动容器中固定布局的表

Question

我需要在一个可滚动的容器中放置一个具有固定布局和固定列宽度的表。表及其单个列应该占用colgroup部分中定义的空间。

这是html：

<div class="scroll-container">

  <table>
    <colgroup>
      <col width="100px">
      <col width="100px">
      <col width="50px">
    </colgroup>

    <tr>
      <td>width &lt; 100px</td>    
      <td>width &lt; 1 100px</td>   
      <td>width &lt; 150px</td>   
    </tr>
  </table>

</div>

这个css：

div.scroll-container{
  width : 200px;
  height : 90px;
  background-color : #ddd;
  overflow-x: scroll;
}

table{
  table-layout: fixed;
}

td{
   border : 1px solid black;

}

列的宽度在缩小，div容器没有滚动，而我想实现相反的效果。

Js小提琴：https://jsfiddle.net/n337p1ck/1/

Answer 1

你只需加上：

width:100%;

到你的桌子上

​

div.container{
  width : 260px;
  height : 70px;
  background-color : #ccc;
}

div.scroll-container{
  width : 200px;
  height : 90px;
  background-color : #ddd;
  overflow-x: scroll;
}

table{
  table-layout: fixed;
  width:100%;
}

td{
   border : 1px solid black;
   
}

<div class="container">

  <table>
    <colgroup>
      <col width="100px">
      <col width="100px">
      <col width="50px">
    </colgroup>

    <tr>
      <td>width = 100px</td>    
      <td>width = 100px</td>   
      <td>width = 50px</td>   
    </tr>
  </table>

</div>

<hr/>

<div class="scroll-container">

  <table>
    <colgroup>
      <col width="100px">
      <col width="100px">
      <col width="50px">
    </colgroup>

    <tr>
      <td>width &lt; 100px</td>    
      <td>width &lt; 1 100px</td>   
      <td>width &lt; 150px</td>   
    </tr>
  </table>

</div>

​