我有一张桌子,我想在td上设置固定宽度为30px.问题是当td中的文本太长时,td被拉伸超过30px.Overflow:hidden在td上不起作用,我需要某种方法来隐藏溢出的文本并保持td宽度为30px.
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud) 原始问题:HTML是否<table>具有默认宽度?
最近有人在这些问题的某个地方问了一个问题,让我感到疑惑.
以此为例.
在这个小提琴中,如果你要检查它的宽度(我正在使用chrome中的inspect元素),它会100px按预期工作.
让我们再添加几个"td",我们将看到td:100px"css"被忽略了.
如您所见,现在它是83px而不是100px最初的预期.
但是,让我说,我回到更少的TD(7),并且我为每个TD元素(500px)添加更宽的宽度,结果是td的宽度被卡住了119px.
最后,假设我有一个2000px宽度的表,宽度的td 100px和许多td元素.
http://jsfiddle.net/rqmNY/7/
现在表宽度会覆盖TD宽度,并将td的宽度扩展为222px.
谁能解释这种行为?
ps请注意,在所有情况下,inspect元素工具告诉我宽度始终对应于css,它只是最终结果没有正确显示.
如果可以包含任意数量的列的页面动态创建,我想要一个100%的表.每列可以包含很长的单词,只要它们都可能不适合一页.为了解决这个问题我使用了table-layout: fixed这个,这使得表格的所有列都可以在页面上看到.问题是我仍然希望每列的宽度是动态的,这样如果一列有短词,它应该比带有长词的列短.
示例:jsfiddle.
表1总是显示所有列,但是当页面足够宽时,即使其他列中有可用空间,它也会破坏该单词.
当页面比列宽时,表2工作正常,但是当窗口较小时,第一列将其他列推出屏幕/其他对象.
有没有办法解决这一切?一个表,它总是包含不比它们必须适合的所有列和列?如果它必须而不是溢出表,我希望它打破这些话.
我可以接受一个js/jquery解决方案,但是如果css可能更好.
编辑:
小表:注意:asasdasdasdasdasdasdasdasdasdasdasd是一个缩短的单词,因为表格不能大于此.
+--------------------+----------+---------+
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc|
|asdasdasdasdasd | | |
+--------------------+----------+---------+
Run Code Online (Sandbox Code Playgroud)
大表:注意:所有列的大小不相同,最好是随着空格均匀分布而增加.
+--------------------------------------+-------------+------------+
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc |
+--------------------------------------+-------------+------------+
Run Code Online (Sandbox Code Playgroud)