border around row cells-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

There are several ways to achieve that goal..

but if you want to stick with tables and yet have border-collapse:separate; to have a gap between rows, you could style your td borders in a way to get the row borders like this:

body{
  background:red;
}

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

td:first-child{
  border-left: solid 4px lime;
}

td:last-child{
  border-right: solid 4px lime;
}

td{
    padding:15px 6px;
    background:#fff;
    border-top: solid 4px lime;
    border-bottom: solid 4px lime;
}

<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>