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

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -