Question

我有一个表格，以可缩放的布局显示表格数据。表本身的宽度为：100％。

在其中一个专栏中，极少数情况下的用户数据将包括将表拉伸到其容器外部的长字符串。

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

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

但是，我的首选是不要将列的内容限制为最大宽度320px。我宁愿div根据需要随桌子伸展，只有当桌子不再适合屏幕时才会溢出。这可能吗？

Answer 1

我之前为此做的是将overflow设置为hidden并将完整的字符串放到alt文本中，以便在悬停时可以看到它。我不知道那是你的意思，但有时我会用它。

如果不是那样尝试使用jquery ui hide效果，这是一个很好看的方法。希望有所帮助

Answer 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>

创建一个包含overflow：auto的单元格的可伸缩表

2 个答案: