tr border-bottom in inline style does not show

Question

I am trying to add border-bottom to <tr> element of table as below but it is not working.

<table>
<tr style="border-bottom: 1px solid black !important;">

It is working when I add the style to <td> but not on <tr>. How can I fix it?

Answer 1

You cannot apply a border on tr element, you need to apply a border on td, or you need to use border-collapse for your table element

Demo (Applying border-bottom to td)

Demo 2 (Applying border-bottom to tr if used border-collapse)

table {
    width: 100%;
    border-collapse: collapse; 
}

table tr { /* Use table tr td if not using border-collapse property */
    border-bottom: 1px solid #eee;
}

Note: Avoid using inline styles, you will feel hard to change them at certain point, also, avoid using !important unless required, consider using more specific selectors instead.