HTML 表格：仅在需要时在 td 中水平滚动答案

【问题标题】：HTML tables: horizontal scroll in a td only when neededHTML 表格：仅在需要时在 td 中水平滚动
【发布时间】：2012-03-30 17:31:00
【问题描述】：

我有一张桌子，上面有以下内容：

<table  cellpadding="2" cellspacing="0" > 
<tr>
<td>Contact: </td>
<td width="100px"><div style="overflow-x:scroll; width:100px">ee@yahoo.com</div>
</td>
</tr>
</table>

此代码显示电子邮件单元格中的水平滚动。

当电子邮件像 ee@yahoo.com 这样较短时，滚动会显示，但由于不需要它而未启用，而当电子邮件较长时，比如说

eeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

滚动启用，因此您可以查看整个电子邮件。

这很好，但我需要的是当电子邮件很短时根本不显示滚动条。

我该怎么做？

我试过了：

overflow-x:auto;

当电子邮件很短时它不会显示滚动，但是当电子邮件是长电子邮件时，它只是将其切掉，根本没有滚动。 我认为这是因为电子邮件中没有空格。

【问题讨论】：

您使用的是哪个浏览器。这对我来说在 chrome 中很好用。我会说你应该尝试overflow:auto，因为它与 IE 兼容（如果你正在使用它）
是的 overflow:auto 可以在所有主流浏览器上使用。
创建一个复制您的问题的小提琴
其实overflow-x:auto也是如此

标签： javascript css scroll html-table cell

【解决方案1】：

像魅力一样工作（IE9）

<table cellpadding="2" cellspacing="0" >  
    <tr> 
    <td>Contact: </td> 
    <td width="100px"><div style="overflow:auto; width:100px">ee@yahoo.com</div> 
    </td> 
    </tr> 
</table>

http://jsfiddle.net/fUW4s/1/

【讨论】：

【解决方案2】：

通过定义overflow-x: scroll，您表示无论如何都会出现滚动条。

您应该使用overflow-x:auto。这是一个有效的demo

【讨论】：

信不信由你，问题是由影响表格的字体大小引起的。一旦我删除字体大小，滚动自动就会起作用..我很困惑