创建一个带有溢出单元格的可伸缩表：自动答案

【问题标题】：Create a scalable table with a cell with overflow:auto创建一个带有溢出单元格的可伸缩表：自动
【发布时间】：2017-08-13 17:00:26
【问题描述】：

我有一个以可扩展布局显示表格数据的表格。表格本身的宽度为：100%。

在其中一列中，用户数据在极少数情况下会包含将表格延伸到其容器之外的长字符串。

我的解决方案是将该单元格的内容放在一个 div 中，并给该 div 一个max-width:320px 和一个溢出：自动。这在IE9和FF7这两个我关心的浏览器中工作。

<table style="width:100%;">
  <tr>
    <td>
      <div style="max-width:320px; overflow:auto;">
        ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
      </div>
    </td>
  </tr>
</table>

但是，我不希望将列的内容限制为 320 像素的最大宽度。我宁愿 div 根据需要与表格一起拉伸，并且仅在表格不再适合屏幕时才会溢出。这可能吗？

【问题讨论】：

标签： html css html-table overflow

【解决方案1】：

我之前为此所做的是将溢出设置为隐藏并将完整的字符串放到替代文本中，以便在悬停时可以看到它。我不知道这是否是你想要的，但我有时会使用它。

如果不是，请尝试使用 jquery ui 隐藏效果，这是一种很好的方法。希望对你有帮助

【讨论】：

嘿。感谢您的想法。替代文本不适用于这种特殊情况。关于 jquery，我无法提出解决方案。我希望表格及其单元格在浏览器调整大小时像往常一样拉伸/收缩，但我希望其中一个单元格的内容在表格溢出时溢出，这样表格就不会溢出。我确信它可以用 jquery/javascript 完成，但不能没有复杂的脚本。你同意吗？

【解决方案2】：

为什么不给 div 的最大宽度为 100% 并将其放置在整个表格周围？

http://jsfiddle.net/wJUyL/

<div style="max-width:100%; overflow:auto;">
    <table style="width:100%;">
      <tr>
        <td>
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
        </td>
      </tr>
    </table>
</div>

【讨论】：

试过这个。我不喜欢它的外观......滚动整个表格而不是有问题的表格单元格。此外，表格可能很大，将水平滚动条一直放在页面底部。