How Can I Add a Bottom Border to Each Row of a Table Using CSS?

Adding a Border to Table Row Bottom

Question

Adding a border to the bottom of every table row using CSS seems challenging. Direct styling of tr elements or applying CSS rules to tr didn't produce the desired result. Is there a better way to achieve this without inline styling?

Solution

To successfully add a border to the bottom of each table row using CSS, you can use the border-collapse property. By setting this property to collapse in the table CSS rule, the table borders merge together.

table { 
    border-collapse: collapse; 
}

This allows you to then apply a border style using the border-bottom property in the tr CSS rule.

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

Example

Consider a 3x3 table:

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

Applying the CSS rules will result in a table with borders only on the bottom of each row:

table {
  border-collapse: collapse;
}

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

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