Add border-bottom to table row <tr>?

Question

I have a table of 3 by 3. I need a way to add a border for the bottom of every row `tr` and give it a specific color.First I tried the direct way, i.e.: But that didn't work. So I added CSS like this: tr { border-bottom: 1pt solid black; }That still didn't work.I would prefer to use CSS because then I don't need to add a `style` attribute to every row.I haven't added a `border` attribute to the ``. I hope that that is not affecting my CSS.

Answer 1

There is a way to specify a border for the bottom of each row in a table using only CSS. You were on the right track with the CSS code

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

However, this line must be modified so that the selector is td rather than tr. This will add a border underneath the rows, but it will be a dashed border instead of a solid border since it is adding the border for each individual column, with there being space between columns by default. To make the lines solid, we need to add a CSS rule to collapse the table borders:

table { border-collapse: collapse; }

This will likely make the table entries be too close together, so to add more spacing between the table cells, we can add padding to the rule for td, as in:

td { border-bottom: 1pt solid black;

padding: 10px; }

You can change the 10 to whatever number you like, depending on how much spacing you want.

This will make solid bottom borders for each row that are all the same color. If you would like to make each row bottom border a different color, then we need to use the nth-of-type specifier to identify each row and then set the border for that row. For example:

tr:nth-of-type(1) td { border-bottom: 1pt solid green; }

tr:nth-of-type(2) td { border-bottom: 1pt solid red; }

tr:nth-of-type(3) td { border-bottom: 1pt solid blue; }

The number in parentheses after nth-of-type specifies the row for applying the rule, and the td specifier indicates that all columns within that row will have the rule applied. So for example, the first rule states that each column in row 1 will have a green bottom border.

So all together, the CSS for all borders being the same color would be as follows:

td { border-bottom: 1pt solid black;

padding: 10px; }

table { border-collapse: collapse; }

And the CSS for each border being a different color would be as follows:

td { padding: 10px; }

table { border-collapse: collapse; }

tr:nth-of-type(1) td { border-bottom: 1pt solid green; }

tr:nth-of-type(2) td { border-bottom: 1pt solid red; }

tr:nth-of-type(3) td { border-bottom: 1pt solid blue; }

I hope this answers your question. Feel free to ask for any clarification.