我有一个包含四列的基本表(我们称之为A,B,C,D)和特定的所需宽度600px。内容全是文字。我想要的是如下分配列宽:
如何使用CSS完成此操作?
这是我最接近的:
<table style="width: 600px; table-layout: fixed;">
<thead>
<th style="white-space: nowrap;">Column A</th>
<th style="white-space: nowrap;">Column B</th>
<th style="white-space: nowrap;">Column C</th>
<th>Column D</th>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;">12345</td>
<td style="white-space: nowrap;">Some Text</td>
<td style="white-space: nowrap;">Some More Text</td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Some very long text goes here. This text is going to get cut off. It won't all fit in this cell. I hope it doesn't wrap onto a second line. That would be bad.
</td>
</tr>
</tbody>
</table>
在这种情况下,列A,B和C的宽度与内容无关。它为单元格提供了太多空间,短文本和长文本空间太小。但是,它确实截断了D列。
我也尝试将列A-C的宽度设置为1%,将列D设置为100%,但是它们都在表的左边缘一起运行。
我有什么想法可以得到宽度计算?
答案 0 :(得分:0)
你可能想要这样的事情http://jsfiddle.net/2qHY3/3/ ..?
删除
white-space: nowrap;text-overflow: ellipsis;
来自上一个<td>