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

Popular posts from this blog

javascript - Is getTimezoneOffset() stable during daylight saving transition? -

Why does PHP consider 0 to be equal to a string? -

formula - R: how to pass in a reference to the variable in glm or lm? -