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

我有一张桌子，它的宽度是屏幕大小的80%。此表包含我的菜单项。菜单项采用表格单元格的形式。我想要的设计是，每个单元格的宽度应与其中的文本相同。但我还需要最后一个单元格，它将是空的，并且与表中剩余的空间一样宽。也就是说，我希望最后一个继承表的宽度（剩余空间）

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

我该如何阻止这种情况发生

除了最后一个单元格外，我希望所有单元格都与文本完全匹配

我希望最后一个单元格占据所有剩余的空间

---

谢谢

通过CSS就很简单了。您只需将

显示

样式修改为

内联

---

附加提琴：

通过CSS很简单。您只需将

显示

样式修改为

内联

---

附加的小提琴：

延伸最后一个单元格以占据整个宽度：

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

…如果要确保其他单元格中的文本不会折叠：

td {
    whitespace: nowrap;
}

此处演示：

---

延伸最后一个单元格以占据整个宽度：

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

…如果要确保其他单元格中的文本不会折叠：

td {
    whitespace: nowrap;
}

此处演示：

---

---

您是否尝试在最后一个td中插入另一个元素？类似于输入或跨度。是否可以在“文本”单元格上指定固定宽度？@JamesDonnelly，其中一个没有回答。我正在使用HTML5，所以我不能使用nowrap。@路人不，我不想这样做。我希望它适合文本单元格的任何内容。@PrashanthSubramaniayer:使用CSS

td{white space:nowrap；}

td:last child{white space:normal；}是否尝试在最后一个td中插入另一个元素？类似于输入或跨度。是否可以在“文本”单元格上指定固定宽度？@JamesDonnelly，其中一个没有回答。我正在使用HTML5，所以我不能使用nowrap。@路人不，我不想这样做。我希望它适合文本单元格的任何内容。@PrashanthSubramaniayer:使用CSS

td{white space:nowrap；}

td:last child{white space:normal；}我也尝试了同样的方法，但它将第一个单元格延伸到最后一个单元格以填充表格宽度。我恐怕不明白注释，上面链接的小提琴不起作用吗？对不起，我的错。您的解决方案非常有效。不过，我还有一个问题。如果我有一个很长的单词空间，那么布局会发生变化（tr的高度会增加），我该如何阻止它？谢谢请检查这是否有用，非常感谢。我必须做一个空白：nowrap；这是我在研究工作休息后发现的。再次感谢：）我也尝试了同样的方法，但它从第一个单元格延伸到最后一个单元格以填充表格宽度。恐怕我不理解注释，上面链接的小提琴不起作用吗？对不起，我的错。您的解决方案非常有效。不过，我还有一个问题。如果我有一个很长的单词空间，那么布局会发生变化（tr的高度会增加），我该如何阻止它？谢谢请检查这是否有用，非常感谢。我必须做一个空白：nowrap；这是我在研究工作休息后发现的。再次感谢：）谢谢！这同样有效。它也会有更好的效果；）-<代码>表格单元格显示属性（高度拉伸至合适、垂直对齐等）非常独特，因此将最后一个单元格设置为显示

内联

会产生很多令人讨厌的副作用。谢谢！这同样有效。它也会有更好的效果；）-<代码>表格单元格显示属性（高度拉伸到合适、垂直对齐等）是非常独特的，因此将最后一个单元格设置为显示

内联

会产生很多令人讨厌的副作用。