Question

我有一张包含以下内容的表格：

<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这样的短片时，滚动显示但是没有启用，因为它不需要，当电子邮件更长时，让我们说

eeeeeeeeeeeeeeeeeeeeeeeeeeeee@yahoo.com

滚动启用，以便您可以看到整个电子邮件。

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

我该怎么做？

我试过了：

overflow-x:auto;

当一封简短的电子邮件时，它不会显示滚动条，但是当电子邮件很长时，它只是剪切它根本没有滚动。 我认为这是因为电子邮件中没有空格。

Answer 1

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

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

Answer 2

就像魅力（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/

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

2 个答案: