html - 滚动容器内具有固定布局的表格不占用定义的宽度

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 fiddle :https://jsfiddle.net/n337p1ck/1/

Answer 1

你只需要添加:

width:100%;

到你的 table

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>