Question

I just stumbled upon this issue and i can’t think of a solution

I have a table in which i want to have the table-rows a top and a bottom border in different colors.

If i simply do the following

table tr { border-top:solid 1px #201e1f;border-bottom:solid 1px black; }

[..]

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
</table>

I get a spacing between all the cells (which makes sense) but when i add the following CSS line, the bottom border overrules the top border, so i only get to see one border

table { border-collapse:collapse; }

Does anyone know how i can get two connecting borders on my table rows?

Answer 1

sounds like you’re looking for border-spacing.