相关疑难解决方法(0)

CSS表td宽度 - 固定,不灵活

我有一张桌子,我想在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 css html-table

66
推荐指数
4
解决办法
27万
查看次数

为什么TD宽度不起作用或未遵循?

原始问题:HTML是否<table>具有默认宽度?

最近有人在这些问题的某个地方问了一个问题,让我感到疑惑.

以此为例.

http://jsfiddle.net/rqmNY/1/

在这个小提琴中,如果你要检查它的宽度(我正在使用chrome中的inspect元素),它会100px按预期工作.

让我们再添加几个"td",我们将看到td:100px"css"被忽略了.

http://jsfiddle.net/rqmNY/2/

如您所见,现在它是83px而不是100px最初的预期.

但是,让我说,我回到更少的TD(7),并且我为每个TD元素(500px)添加更宽的宽度,结果是td的宽度被卡住了119px.

http://jsfiddle.net/rqmNY/6/

最后,假设我有一个2000px宽度的表,宽度的td 100px和许多td元素. http://jsfiddle.net/rqmNY/7/

现在表宽度会覆盖TD宽度,并将td的宽度扩展为222px.

谁能解释这种行为?

ps请注意,在所有情况下,inspect元素工具告诉我宽度始终对应于css,它只是最终结果没有正确显示.

html css html-table column-width

8
推荐指数
2
解决办法
5万
查看次数

具有动态列但布局固定的表

如果可以包含任意数量的列的页面动态创建,我想要一个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)

html javascript css jquery css3

7
推荐指数
1
解决办法
1738
查看次数

标签 统计

css ×3

html ×3

html-table ×2

column-width ×1

css3 ×1

javascript ×1

jquery ×1