border around row cells

November 15, 2022

How to make an outer border around all cells in a row? Check the example in the bottom with the green border

body {
  background: red;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 30px;
}

td {
  padding: 15px 6px;
  background: #fff;
}

<table>
  <tr>
    <td>some data row 1</td>
    <td>some data row 1</td>
  </tr>
  <tr>
    <td>some data row 2</td>
    <td>some data row 2</td>
  </tr>
</table>

>Solution :

There are a few ways. Use outline on the tr element to put a border outside the td elements.

body {
  background: red;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 30px;
}

td {
  padding: 15px 6px;
  background: #fff;
}

tr {
  outline: 2px solid #0f0;
}

<table>
  <tr>
    <td>some data row 1</td>
    <td>some data row 1</td>
  </tr>
  <tr>
    <td>some data row 2</td>
    <td>some data row 2</td>
  </tr>
</table>

Or alternatively style each td element and the :first-child and :last-child to put the borders on the end.

body {
  background: red;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 30px;
}

td {
  padding: 15px 6px;
  background: #fff;
  border-top: 2px solid #0f0;
  border-bottom: 2px solid #0f0;
}

td:first-child {
  border-left: 2px solid #0f0;
}

td:last-child {
  border-right: 2px solid #0f0;
}

<table>
  <tr>
    <td>some data row 1</td>
    <td>some data row 1</td>
  </tr>
  <tr>
    <td>some data row 2</td>
    <td>some data row 2</td>
  </tr>
</table>