Search code examples
htmlcsshtml-table

tr border-bottom in inline style does not show

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?

Solution

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