HTML/CSS表,如何在不影响单元格宽度的情况下增加表格的宽度?

问题描述:

我有一个宽度为屏幕大小80%的表格。此表包含我的菜单项。菜单项以表格单元格的形式出现。我想要的设计是每个单元格只应与其中的文本一样宽。但我也想要最后一个单元格,它将是空的,并且与表格中剩余的空间一样宽。 I.E我希望最后一个继承表的宽度(剩余空间)。HTML/CSS表,如何在不影响单元格宽度的情况下增加表格的宽度?

但是,当我增加表格宽度而不是仅适合其文本时,所有单元格都会拉伸。

如何阻止这种情况发生?

  1. 我想除了最后的单元格以外的所有元素都完全适合他们的文本。
  2. 我想要最后一个单元占用所有剩余的空间。

谢谢!

+0

你有没有尝试在最后一个td内插入另一个元素?如输入或跨度。 – Toping 2013-02-28 11:38:52

+0

是否可以在“text”单元上指定固定宽度? – Passerby 2013-02-28 11:39:07

+0

@JamesDonnelly那一个没有回答。我使用的是HTML5,因此我无法使用nowrap。 – 2013-02-28 11:52:31

延长最后一个单元格占据全宽:

td:last-child { 
    width: 100%; 
} 

...,如果你想确保在其他单元格中的文本不崩溃:

td { 
    whitespace: nowrap; 
} 

演示在这里:

http://jsfiddle.net/barney/kz77m/

+0

谢谢!这也适用。 – 2013-03-01 04:08:35

+0

它也会有更好的效果;) - “表格单元格”显示属性(高度拉伸到合适,垂直对齐等)是非常独特的,所以设置最后一个单元格显示“内联”有很多讨厌副作用。 – Barney 2013-03-01 09:34:07

通过CSS很简单。您只需将display样式修改为inline即可。

附小提琴:http://jsfiddle.net/CZYSa/

+0

我也一样,但它拉伸了第一个到最后一个,但是一个单元格填满了桌子的宽度。 – 2013-02-28 12:01:35

+0

恐怕我不理解评论,上面提到的小提琴不行吗? – hexblot 2013-02-28 12:04:05

+0

对不起,我的坏。您的解决方案很好。 虽然我还有一个额外的问题。如果我有一个​​真的长字space_reallylongword ,布局是抛(tr的高度增加),我该如何阻止呢? 谢谢! – 2013-02-28 12:15:18