Table with only vertical lines visible

Question

I need a way to show only the vertical lines in a table.

I've tried to add border-left and border-right, both with :1px solid #red;, to both the table and the separate td's. but it won't add the border color.

So what I'm looking for is an easy way to create these vertical lines.

Answer 1

Use border-collapse on your <table> than border-left and border-right on your <td>.

table { border-collapse: collapse; }
tr { border: none; }
td {
  border-right: solid 1px #f00; 
  border-left: solid 1px #f00;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>