How Can I Add a Bottom Border to Each Row in an HTML Table?

Add Border to Bottom of Table Row

You encounter an issue when attempting to add a solid black border to the bottom of each table row (). Employing inline styles or CSS initially proved ineffective.

To rectify this, incorporate border-collapse: collapse; within the table rule in your CSS:

table {
    border-collapse: collapse;
}

This modification essentially merges adjacent borders, ensuring that the borders applied to individual rows are visible.

Code Example:

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

table {
  border-collapse: collapse;
}

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

Upon applying this CSS, the borders between rows in the table become visible as expected.

The above is the detailed content of How Can I Add a Bottom Border to Each Row in an HTML Table?. For more information, please follow other related articles on the PHP Chinese website!