html - 对于 thead tr，边框未按预期工作

Question

我希望 thead 中的整行都具有指定的边框，但是当我使用边框样式属性时它没有按预期工作。但它正在使用 outline 属性。这是一个代码片段:

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>

Answer 1

使用 border: none !important; 覆盖您的第二个 border 声明。除非绝对必要，否则不推荐使用 !important。它使可维护性变得更加困难。更多信息see here .