I want to add a rectangular ring around the row in an HTML table like shown in this image

How can I do that?

I am creating a table using streamlit where I want to show a rectangular border around the row. The purpose of the rectangular border will be to highlight active and inactive user. So, if the user is active, the colour of the rectangle will be green else red.

Below is the example of table, where the border is "green" and transparent background so I don't need border to be square. I need rectangle over the row with 50% radius as shown in the image:

td {
  padding: 5px;
  text-align: center;
  border: 1px solid green;
  /* Light border for all cells */
}

/* Apply rounded corners to the first and last cells in each row */
tr td:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

tr td:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>

I want to add a rectangular ring around the row in an HTML table like shown in this image

How can I do that?

I am creating a table using streamlit where I want to show a rectangular border around the row. The purpose of the rectangular border will be to highlight active and inactive user. So, if the user is active, the colour of the rectangle will be green else red.

Below is the example of table, where the border is "green" and transparent background so I don't need border to be square. I need rectangle over the row with 50% radius as shown in the image:

td {
  padding: 5px;
  text-align: center;
  border: 1px solid green;
  /* Light border for all cells */
}

/* Apply rounded corners to the first and last cells in each row */
tr td:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

tr td:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>

• html
• css
• streamlit

• Do you mean - codepen.io/Paulie-D/pen/JoPQKbB – Paulie_D Commented Feb 5 at 13:15

2 Answers 2

Use a pseudo-element like below:

td {
  padding: 5px;
  text-align: center;
}

tr.highlighted {
  position: relative; /* relative to the whole row */
}
/* only the pseudo element of the first-child */
tr.highlighted td:first-child:before {
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 2lh; /* or any big value */
  border: 2px solid green;
}

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>

1) Use the 'border-collapse' property with its "separate" value for the table 2) Use the 'border-spacing' property to set the distance between the borders of neighboring table cells. 3) Add the 'border-top-left-radius' and 'border-bottom-left-radius' properties for the first table cell and the 'border-top-right-radius' and 'border-bottom-left-radius' properties for the last table cell.

table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

td {
  text-align: center;
  border: 1px solid green;
  border-right: none;
  border-left: none;
  padding: 10px;
}

td:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-left: 1px solid green;
}
  
td:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-right: 1px solid green;
}