透明表邊框與tr背景

Question

我使用：nth-​​child（odd / even）選擇器為表格行設置不同的背景，以提高可讀性。 現在，我必須為表格設置“邊框間距”或“邊框顏色：透明”，以使背景通過單元格之間的空間可見。 問題在於，不同列的水平間距應該不同-最后一列的間距應大於整個表格的間距（在下面的示例中用紅色標記）。 我怎樣才能做到這一點？ 不知道。 請幫忙。 謝謝！

 body { background: #3a7; } table { border-collapse: separate; border-spacing: 5px; border: 0px solid #ffffff; margin: 1em; table-layout: fixed; } td { font-size: 1rem; empty-cells: show; /*background: white;*/ padding: 0; } td.last { font-size: 1rem; empty-cells: show; /*background: white;*/ /*border-left: 20px transparent;*/ border-left: 20px solid rgba(255,0,0,0.5); } tr:nth-child(odd) { padding: 0px; margin: 0; background: #fff; color: #000; border: 0px solid transparent; overflow: visible; } tr:nth-child(even) { padding: 0px; margin: 0; background: #000; color: #fff; border: 0px solid transparent; overflow: visible; } input { border: 0px; outline: 0px transparent; background-color: transparent; color: inherit; margin: 5px; } 

 <table> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> </table> 

Answer 1

這應該工作

 body { background: #3a7; } td.last { font-size: 1rem; empty-cells: show; } tr:nth-child(odd) { padding: 0px; color: #000; border: 0px solid transparent; overflow: visible; } tr:nth-child(even) { padding: 0px; margin: 0; color: #fff; border: 0px solid transparent; overflow: visible; } input { border: 0px; outline: 0px transparent; background-color: transparent; color: inherit; margin: 5px; } tr:nth-child(odd) div { background: white; } tr:nth-child(even) div { background: black; } .last > div { margin-left: 20px; } 

 <table> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> <tr> <td><div><input></div></td> <td><div><input></div></td> <td class="last"><div><input></div></td> </tr> </table> 

Answer 2

另一個選擇是將最后一個單元格的背景設置為none然后為輸入字段及其邊框的背景着色：

https://jsfiddle.net/e1fnoa34/

Answer 3

您可以將最后一個單元格background: none ，並將其設置為padding-left: 20px 。 然后將單元格的內容包裝在DIV或SPAN ，並將背景樣式應用於內部包裝器。

這並不理想，但是很遺憾，您不能隨表格單元格間距的變化而變化，表格單元格的邊距將被忽略。