Why Doesn't My Table Row Bottom Border Appear Using CSS?

How to Add Borders to the Bottom of Table Rows

You have a 3x3 table and you want to add a border to the bottom of each row. You tried adding the style attribute directly to the elements, but that didn't work. You then added CSS like this:

tr {
border-bottom: 1pt solid black;
}

But that still didn't work. You prefer to use CSS, so you don't need to add a style attribute to every row.

The problem is that you haven't added border-collapse:collapse to your table rule. This property tells the browser to collapse the borders of adjacent cells. Without it, the borders will be drawn on top of each other, making it difficult to see the lines.

To fix the issue, add border-collapse:collapse to your table rule:

table {
border-collapse: collapse;
}

Here is an example:

table {
border-collapse: collapse;
}

tr {
border-bottom: 1pt solid black;
}

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

This will add a 1pt black border to the bottom of each row in your table.

The above is the detailed content of Why Doesn't My Table Row Bottom Border Appear Using CSS?. For more information, please follow other related articles on the PHP Chinese website!