html中最右边,html – 如何获得最右边的列填充剩余空间？

我找到了一个简单的解决方案：

table td:last-child {

width: 100%;

}

结果：

body {

font: 12px "Sans serif";

}

table {

width: 100%;

background-color: #222222;

color: white;

border-collapse: collapse;

}

table th {

padding: 10px;

text-align: left;

}

table td {

padding: 2px 10px;

}

table td:last-child {

width: 100%;

}

table td:nth-child(odd), table th:nth-child(odd) {

background-color: rgba(255, 255, 255, 0.05);

}

table tr:nth-child(even) {

background-color: rgba(255, 255, 255, 0.05);

}

table tr:last-child td {

padding-bottom: 10px;

}

Product	Cardinality	Price per item
Apple	5	$2
Pear	3	$3
Sausage	10	$0.5
Pineapple	2	$8
Tomato	5	$1
Lightsaber	2	$99 999

这似乎在我目前的情况下起作用，但它看起来像在其他情况下会导致不必要的副作用。如果我绊倒任何一个，我会编辑这个答案。

可能的副作用

>多字表格单元格将被包装成多行，以使列尽可能的窄。一个解决方案是在表格单元格上使用white-space：nowrap，但是当它们应该包装时，会阻碍具有大量文本的单元格。