Question

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

＆＃13;

table.table, table.table * {
			border: none !important;
		}

table.price-table thead tr {
			border: 10px solid blue;
			outline: thin solid red;

  
		}

＆＃13;

<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>

＆＃13;

Answer 1

使用border: none !important;会覆盖您的第二个border声明。除非绝对必要，否则不建议使用!important。它使可维护性变得更加困难。有关详细信息see here。

Answer 2

删除以下css：

table.table, table.table * {
            border: none !important;
        }

以上css将影响不显示边框。因为你已经给了table.table *所以，它将针对表的所有元素。而且你已经给了!important所以，没有其他的css会覆盖none css。

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 3

你的造型

table.table, table.table * {
            border: none !important;
        }

将所有元素border样式覆盖到none，因为您使用的是*。因此，如果您想申请，请将此属性更改为您想要的内容。并且请避免使用!important，除非它太重要并且您想要覆盖一些库或框架默认样式。

Answer 4

试试这个作为你的css：

table.table, table.table * {
    }

table.price-table thead tr {
    border: 1px solid red;
    outline: thin solid red;
}

检查它是否有效：https://jsfiddle.net/Aschab/6p6kht43/

作为一个建议，如果你需要！对你的css很重要，你做错了。在盒子外面思考

边框不能按预期工作

4 个答案: