html - Border not working as expected for thead tr -
i want whole of row in thead have specified border not working expected when using border styling attribute. working using outline attribute. here code snippet:
table.table, table.table * { border: none !important; } table.price-table thead tr { border: 10px solid blue; outline: thin solid red; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <table class="table price-table"> <thead> <tr> <th>ticket type</th> <th>price</th> </tr> </thead> <tbody> <tr data-ticket-id=1> <td class="category-ticket">adult</td> <td class="price-ticket">rm 20</td> </tr> <tr data-ticket-id=3> <td class="category-ticket">child</td> <td class="price-ticket">rm 15</td> </tr> </tr> </tbody> </table>
using border: none !important; overrides second border declaration. use of !important not recommended unless strictly necessary. makes maintainability lot harder. more information see here.
Comments
Post a Comment