Change to border-width in 5.3 affects table negatively

[OlivierLabbe]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In 5.3.0 and 5.3.1, a change to the border-* CSS caused a change in behaviour.

When applied in table table/tr/td in combination of directional "border-bottom", the directional stopped functioning.

Reduced test cases

Heres's exemples :
5.2.3: https://codepen.io/olivierlabbe/pen/poQQeWr
5.3.1: https://codepen.io/olivierlabbe/pen/PoxxpEP

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.1

[louismaximepiton]

Hey there, it seems like the issue you describe here was a part of an unintended feature in v5.2.3 as #37999 explains. I think it might be a part of the v6 as this kind of feature might be breaking.

Meanwhile, you can set:

.table-custom {
  --bs-border-width: 2px; // or .125rem
  --bs-table-border-color: #000; // or var(--bs-dark) or w/e fits your needs
}

and use it on your .table

[Abdullah-Web-D]

In versions 5.3.0 and 5.3.1, there was a change in the behavior of the directional "border-bottom" property when applied in combination with other directional borders (e.g., "border-top," "border-left," "border-right"). This change caused the directional "border-bottom" to stop functioning as expected in some cases.

To demonstrate this issue, here's an example code snippet for a table with CSS styles applied:

HTML:

<table class="my-table">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

CSS (version 5.3.1 and earlier):

.my-table td {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black; /* The directional border-bottom */
}

In versions 5.3.0 and 5.3.1, the above code may cause the "border-bottom" to stop rendering properly, and it might appear as if there is no "border-bottom" for the cells.

To fix this issue, you can use the "border-collapse" property on the table element, which can resolve the problem with directional borders:

CSS (with fix):

.my-table {
  border-collapse: collapse; /* Add this line to fix the issue */
}

.my-table td {
  border: 1px solid black; /* Combine all borders into one shorthand property */
}

By setting the "border-collapse" property to "collapse," the directional "border-bottom" should work as expected, and you will see all borders rendered correctly for the table cells.