我有一个表格,其宽度是屏幕尺寸的 80%。此表包含我的菜单项。菜单项采用表格单元格的形式。我想要的设计是每个单元格的宽度应仅与其中的文本一样宽。但我还想要最后一个单元格,它将是空的,并且与表格中的剩余空间一样宽。IE 我希望最后一个继承表格的宽度(剩余空间)。
但是,当我增加表格宽度而不是只适合它们的文本时,所有单元格都会被拉伸。
我该如何阻止这种情况发生?
- 我希望除了最后一个单元格之外的所有单元格都完全适合它们的文本。
- 我希望最后一个单元格占用所有剩余空间。
谢谢!
我有一个表格,其宽度是屏幕尺寸的 80%。此表包含我的菜单项。菜单项采用表格单元格的形式。我想要的设计是每个单元格的宽度应仅与其中的文本一样宽。但我还想要最后一个单元格,它将是空的,并且与表格中的剩余空间一样宽。IE 我希望最后一个继承表格的宽度(剩余空间)。
但是,当我增加表格宽度而不是只适合它们的文本时,所有单元格都会被拉伸。
我该如何阻止这种情况发生?
谢谢!
扩展最后一个单元格以占据全宽:
td:last-child {
width: 100%;
}
...并且,如果您想确保其他单元格中的文本不会折叠:
td {
whitespace: nowrap;
}
演示在这里:
通过 CSS 很简单。您只需将display
样式修改为inline
.
附小提琴:http: //jsfiddle.net/CZYSa/