How to get a solid line between each row in a table?

Question

Html is not my specialty :)

I have an Html table and I want to have a solid line between each row. I've done it by defining a border-bottom on each <td> tag, like so:

<td style="border-bottom: 1px solid #0066ff;">[content]</td>

But it comes out with a one-pixel gap in the line, as seen below:

I tried putting the border-bottom in the <tr> tag, but that didn't work at all. What's the correct way to do this?

Answer 1

You may use the CSS attribute border-collapse and set it to collapse:

table
{
  border-collapse: collapse;
}

td
{
  border-bottom: solid 1px black;
}

<table>
  <tr>
    <td>Test</td>
    <td>Test 2</td>
    </tr>
  <tr>
    <td>Test</td>
    <td>Test 2</td>
    </tr>
</table>