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

How to check data type in C++? -

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

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