创建一个带有溢出单元格的可缩放表格：auto

我有一个表格以可伸缩布局显示表格数据。桌子本身有一个宽度：100％。创建一个带有溢出单元格的可缩放表格：auto

在其中一列中，罕见情况下的用户数据将包括将表格拉伸到其容器外的长字符串。

我的解决方案是将该单元格的内容放入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根据需要在表中延伸，只有当表格不再适合屏幕时才会溢出。这可能吗？

来源

2011-10-19 Nick Petrie

为什么不给div一个100％的最大宽度并将它放在整个桌子周围？

http://jsfiddle.net/wJUyL/

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

来源

2011-10-19 21:41:57

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

什么我对这个前设置溢出隐藏的做，把满弦的替代文本，所以你可以看到它，如果你徘徊。我不知道那是你要做什么，但有时我会用它。

如果不是那么尝试寻找使用jQuery UI的隐藏效果这是一个好看的方法来做到这一点。希望有帮助

来源

2011-10-19 23:30:52 1ftw1

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

创建一个带有溢出单元格的可缩放表格：auto

回答

相关问题