css - 使表格行的最后一个单元格吃掉所有空白

标签 css css-tables

当您将表格设置为 100% 宽时,默认行为是按比例分配每个单元格的宽度,以便文本较多的单元格较宽,文本较少的单元格较窄。

我希望我的表格填充屏幕的宽度,但其中的单元格应向左对齐,就好像我没有指定表格宽度一样。换句话说:

enter image description here

如何在保持整个表格 100% 宽的同时,在表格单元格右侧获得漂亮的空白区域?

最佳答案

这个 css 应该处理它:

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

但是,这将尝试向左挤压所有其他单元格。因此,您可能需要添加此内容以使列标题的高度保持一致:

thead {white-space:nowrap;}

关于css - 使表格行的最后一个单元格吃掉所有空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17470394/

相关文章:

css - Bootstrap : add add-on below input

jquery - html 表单垂直文本框

css - 隐藏列时如何保持表格列的宽度?

html - 突出显示相同的第 n 个子元素

css - 为什么按钮元素允许垂直对齐 : middle?

JavaScript 宽度检查以禁用事件

javascript - 如何通过纯 CSS 使充满 svg 的背景动画化?

html - Sass 的亮度、变亮和变暗函数实际上是做什么的?

html - CSS html 表格左右边框

css - 怎么漏掉显示:table on the parent element affect layout when using the display:table-cell hack?