Home My html cell (td) border color is overiding the table border color. How can I prevent this?

Questions

My html cell (td) border color is overiding the table border color. How can I prevent this?

April 15, 2024

I have a table with one row and four cells.
I want that inside the table the td border colour is active, but the table outer border color should be as defined in the table css properties.

For achieving that I have added !important to the table border definition. But still the td border definition is overriding it. How can I prevent this?

.td_table {
  border: 1pt solid #B5B5B5;
}

.table_1 {
  border: 1px solid black !important;
}

<table class="table_1">
  <tr max-height="35">
    <td class="td_table">...</td>
    <td class="td_table">...</td>
    <td class="td_table">...</td>
    <td class="td_table">...</td>
  </tr>
</table>

>Solution :

The table’s outer border color is defined by the .table_1 class and the inner cell borders are defined by the .td_table class without being overridden, you can apply a separate border style to the table cells ( elements) directly.

.td_table {
  border: 1pt solid #B5B5B5;
}

.table_1 {
  border: 1px solid black !important;
}

.table_1 td {
  border: none; /* Resetting the border for all table cells */
}

<table class="table_1">
  <tr max-height="35">
    <td class="td_table">...</td>
    <td class="td_table">...</td>
    <td class="td_table">...</td>
    <td class="td_table">...</td>
  </tr>
</table>