创建一个可扩展的表格，其中的单元格带有溢出：自动

发布于 2024-12-10 14:30:44 字数 715 浏览 0 评论 0原文

我有一个以可扩展布局显示表格数据的表格。表格本身的宽度：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>

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

原文

I have a table displaying tabular data in a scalable layout. The table itself has a width:100%.

In one of the columns, user data on rare occasion will include long strings that stretch the table outside of its container.

My solution was to put the contents of that cell inside a div, and give the div a max-width:320px and an overflow:auto. This work in IE9 and FF7, the two browsers I'm concerned about.

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

However, my preference is not to limit the column's contents to a max-width of 320px. I'd rather that the div stretches as needed with the table, and only overflows when the table no longer fits the screen. Is this possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

中性美 2024-12-17 14:30:44

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

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

回复收藏 0 原文

放血 2024-12-17 14:30:44

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

http://jsfiddle.net/wJUyL/

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

Why not give the div a max width of 100% and place it around the entire table?

http://jsfiddle.net/wJUyL/

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

回复收藏 0 原文

~没有更多了~