css溢出滚动表单元格宽度：自动或宽度：100％答案

【问题标题】：css overflow scroll table cell with width:auto or width:100%css溢出滚动表单元格宽度：自动或宽度：100％
【发布时间】：2017-03-02 08:18:29
【问题描述】：

我想用滚动条和动态宽度构建灵活的布局。

我有表格宽度、高度 100% 的窗口和 2(3) 列具有自动宽度（宽度取决于它的内容）和具有剩余宽度的中心列。我无法指定列的确切宽度。

如果我的内容大于单元格的宽度和高度，我希望有水平和垂直滚动条；

示例 1

示例 2 这里是LiveDemo

<div style="width:1024px">
    <table style="width:100%">
    <tr>
       <td>
           <div>Column Menu with Dynamic Content and width</div>
       </td>
       <td style="width:100%;">
           <div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>           
       </td>
    </tr>
   </table>
</div>

我不能使用：

table-layout:fixed - 因为列宽取决于它的内容
overflow:scroll 指定了width,height
我需要纯 CSS 解决方案

我试过了：

width:100%, max-width:100%, min-width:100% - 不工作
white-space:wrap 仅在内容为文本且只有垂直滚动条时有效

问题是：如何使div 和overflow:scroll 或overflow:auto 拥有其父容器的width,height（在我的情况下是TD）

附言 最好的情况是 <TD style="overflow:auto"></TD> 并且宽度是自动的。

【问题讨论】：

如果列宽取决于内容，那么它如何知道何时滚动？另外你怎么能有 2 列，但其中之一是 100%。这也是表格数据吗？如果没有，我会使用 display:flex 和 divs，会更容易实现你想要的
如果您运行示例，您将看到表格列是否具有自动宽度，其宽度将根据内容的宽度计算。对于第一列，第二列的宽度将是表格总宽度的剩余部分
好的，运行你的例子并去掉那个 200px，你会看到第一列缩小而不是增长，唯一的增长方式是 100% 在另一列上是如果它是一个图像或者如果你有空格 nowrap;

标签： css scroll html-table width overflow

【解决方案1】：

找到（丑陋的）解决方案，但它有效！

基本思想，是用table-layout:fixed将可滚动内容包装在另一个表格中，使外部表格具有动态宽度:)

这里是Live Demo

  <table border="1" width="100%" height="100%">
    <tr>
      <td>
          <div style="width:200px">Left Menu</div>
      </td>
      <td style="width: 100%;">
          <table style="table-layout: fixed; width: 100%; height: 100%;">
          <tr><td>
              <div style="overflow:auto; width:100%; height:100%;">
                <div style="width:1000px; height:1000px; background:#f0f0f0;">Calendar</div>
              </div>
            </td>
          </tr>
          </table>
      </td>
       <td>
          <div style="width:300px">Right Menu</div>
      </td>
      </tr>
  </table>

如果您找到更好的解决方案，无需过多标记，欢迎在这里发帖...！

p.s 我想我应该尝试使用display:table 或flex 来获得更优雅的解决方案

【讨论】：

【解决方案2】：

找到第二个解决方案（更漂亮），并且成功了！

在 stackoverflow 上，有一些解决方案说使用高度、宽度和溢出滚动将子 div 添加到 td，但它们都不适用于单元格的动态宽度，所以 我通过添加到稍微修改了解决方案div position:absolute 并设置top,bottom,right,left to 0，并添加到父容器position:relative;

这里是Live Demo 1

    <table border="1" width="100%" height="100%">
      <tr>
        <td> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </td>
        <td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </td>
         <td> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </td>
        </tr>
    </table>

如果我们走得更远，更现代（在没有桌子的生活中），它会是这样的：

这里是Live Demo 2

    <ul style="width:100%; height:100%; display:table;">
        <li style="display:table-cell;"> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </li>
        <li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </li>
         <li style="display:table-cell;"> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </li>
    </ul>

【讨论】：