html - Transparent table border with tr background -

i use :nth-child(odd/even) selector make different background table rows better readability. , have set "border-spacing" or "border-color: transparent" table, make background visible thru space between cells. problem is, horizontal spacing should different different columns - last column should have larger spacing whole table (marked red in sample below). how can 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>

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>