html - td文本太长时html css表格宽度变大

Question

抱歉，可能有很多代码，但是为什么我将表格设置为固定大小，但是当我的内容太长时，它不适合它的 td 宽度，但是它正在将表格大小从 810px 增加到更长的时间......问题？怎么了？

<table cellpadding="0" cellspasing="0" class="sortable zebra tablesorter tablesorter-default" id="articles-table">
...

http://jsfiddle.net/FN5Sn/

现在看起来像这样（而且 mu 也是如此）：

这是我更改某些列内容时的样子（所以表格不是 810px 并且在可见区域上增加）

但我必须设置，该表是固定大小的，例如，如果表太长，第三列的大小会变小.... 怎么做？

注意：第二列必须是 nowrap .... 所有其他列都可以是自动宽度

Answer 1

您需要从有问题的 TD 中删除它：

white-space:nowrap;

以下是如何使用鼠标悬停效果来显示不适合 TD 的隐藏文本：

HTML：

<table width="100" border="1">
   <tr>
       <td>
           <div class="long">123 456 790-1122-4455</div>
       </td>
            <td>
           Other Data
       </td>
    </tr>
</table>

CSS：

td {
  white-space:nowrap; 
  min-height:25px;
  position:relative;
  width:90px  
}

.long {
    overflow-x:hidden;
    width:90px;
}   

.long:hover {
   position:absolute;
   z-index:10; 
   top:0;
   left:0;
   width:200px;
   background-color:#c0c0c0;
   border:1px solid #000000; 
   overflow-x:visible 
}