html - 忽略 td 内容的宽度

Question

<table>
    <tr><td class='header'>Some looooong not important header</td><td class='header'>....</td>........</tr>
    <tr><td>Important data</td><td></td>.........</tr>
</table>

如何在 CSS 中忽略“标题”的内容宽度？我的意思是，“Some looooong not important header”必须裁剪到“Important data”的宽度，并且必须 overflow hidden (不转移到下一行)。

没有硬编码宽度的版本呢？

Answer 1

<table>
<tr><td><div class="crop">Some looooong not important header</div></td>
    <td class='header'></td>
</tr>
<tr>
    <td class="width">Important data</td>
</tr>
</table>

和 CSS

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}
.width {100px;}

我这里有一个演示 http://jsfiddle.net/Azzamean/qzgnkapw/

如果您不想对 td 的宽度进行硬编码......那么只需弄清楚它的宽度是多少，然后在您不重要的文本的 div 上为您的类(class)设置它。