我找到了一個簡單的解決方案：

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;

}

ProductCardinalityPrice 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，但是當它們應該包裝時，會阻礙具有大量文本的單元格。

總結

以上是生活随笔為你收集整理的html中最右边,html – 如何获得最右边的列填充剩余空间？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。