Transparent table border with tr background - html

Question

I use :nth-child(odd/even) selector to make different background for table rows for better readability. And now I have to set "border-spacing" or "border-color: transparent" for my table, to make background visible thru the space between cells. The problem is, that horizontal spacing should be different for different columns - the last column should have larger spacing than whole table (marked with red in the sample below).
How can I do that? Have no idea. Please help. Thank you!
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

This should work
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

Another option is to set the last cell's background to none and instead color the background of the input field and its border:
https://jsfiddle.net/e1fnoa34/

Answer 3

You could make the last cell background: none, and give it padding-left: 20px. Then wrap the cell's content in a DIV or SPAN and apply the background styling to the inner wrapper instead.
Not ideal, but unfortunately you can't vary the with of the table cell spacing, and margin is ignored for table cells.