HTML/CSS表,如何在不影响单元格宽度的情况下增加表格的宽度?
我有一个宽度为屏幕大小80%的表格。此表包含我的菜单项。菜单项以表格单元格的形式出现。我想要的设计是每个单元格只应与其中的文本一样宽。但我也想要最后一个单元格,它将是空的,并且与表格中剩余的空间一样宽。 I.E我希望最后一个继承表的宽度(剩余空间)。HTML/CSS表,如何在不影响单元格宽度的情况下增加表格的宽度?
但是,当我增加表格宽度而不是仅适合其文本时,所有单元格都会拉伸。
如何阻止这种情况发生?
- 我想除了最后的单元格以外的所有元素都完全适合他们的文本。
- 我想要最后一个单元占用所有剩余的空间。
谢谢!
延长最后一个单元格占据全宽:
td:last-child {
width: 100%;
}
...,如果你想确保在其他单元格中的文本不崩溃:
td {
whitespace: nowrap;
}
演示在这里:
谢谢!这也适用。 – 2013-03-01 04:08:35
它也会有更好的效果;) - “表格单元格”显示属性(高度拉伸到合适,垂直对齐等)是非常独特的,所以设置最后一个单元格显示“内联”有很多讨厌副作用。 – Barney 2013-03-01 09:34:07
通过CSS很简单。您只需将display
样式修改为inline
即可。
我也一样,但它拉伸了第一个到最后一个,但是一个单元格填满了桌子的宽度。 – 2013-02-28 12:01:35
恐怕我不理解评论,上面提到的小提琴不行吗? – hexblot 2013-02-28 12:04:05
对不起,我的坏。您的解决方案很好。 虽然我还有一个额外的问题。如果我有一个真的长字space_reallylongword ,布局是抛(tr的高度增加),我该如何阻止呢? 谢谢! – 2013-02-28 12:15:18
你有没有尝试在最后一个td内插入另一个元素?如输入或跨度。 – Toping 2013-02-28 11:38:52
是否可以在“text”单元上指定固定宽度? – Passerby 2013-02-28 11:39:07
@JamesDonnelly那一个没有回答。我使用的是HTML5,因此我无法使用nowrap。 – 2013-02-28 11:52:31