css - How to remove only bottom border on specified row in html table -
i have simple html table on want remove bottom border of tr
on specific row.
the table
<table cellpadding="5"> <thead> <tr valign="top"> <th>title</th> <th>title 2</th> <th>title 3</th> <th>title 4</th> </tr> </thead> <tbody> <tr> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> <tr class="no-bottom-border"> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> <tr> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> </tbody> </table>
what i've tried add class tr
want without bottom border class="no-bottom-border"
, css remove it
tr .no-bottom-border {border-bottom: none}
this doesn't seems work. here jsfiddle table
target borders of td
, because tr
has no border properties.
demo
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } table { border: 1px solid #ccc; color: #37393b; margin: 10px 0 0 0; text-shadow: #fff 1px -1px 1px; text-align: left; width: 100%; } table tbody tr td { background: #fff; border-bottom: 1px dotted #d00; } tr.no-bottom-border td { border-bottom: none }
<table cellpadding="5"> <thead> <tr valign="top"> <th>title</th> <th>title 2</th> <th>title 3</th> <th>title 4</th> </tr> </thead> <tbody> <tr> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> <tr> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> <tr class="no-bottom-border"> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> <tr> <td>test entry</td> <td>test entry</td> <td>test entry</td> <td>test entry</td> </tr> </tbody> </table>
Comments
Post a Comment