html - 表格单元格溢出

Question

我需要创建一个聊天布局，它可以使用所有可用空间并很好地缩放，但几乎没有固定大小。

结构如下:

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

但是，我想在第一个表格单元格中放置很多内容并且我希望它滚动，所以它不会展开表格。

是否可以在单元格没有固定高度的情况下使其正确溢出？简单地添加 overflow: auto 似乎不起作用。

附言。我讨厌表格，但想不出一种非常干净且跨浏览器的方式来使用 div 和 css 进行这样的布局。如果有人能想出一个，我会很乐意使用它。

Answer 1

实现的一种方法是将所有内容放在 div 元素中并将 div overflow 属性设置为 auto

<table style="width: 100%; height: 100%">
    <tr>
        <td>
         <div style="overflow:auto;">
              //your contain 
          </div>
        </td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>