边框不能像预期的那样工作tr

我想让整个行中的边框具有指定的边框，但是当我使用边框样式属性时它不像预期的那样工作。但它正在使用outline属性。下面的代码片段：边框不能像预期的那样工作tr

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

 
table.price-table thead tr { 
 
\t \t \t border: 10px solid blue; 
 
\t \t \t outline: thin solid red; 
 

 
    
 
\t \t }

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

 

 

 
    </tr> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
</tbody> 
 
</table>

来源

2016-03-07 geckob

使用border: none !important;覆盖你的第二个border声明。除非严格需要，否则不建议使用!important。它使维护更困难。欲了解更多信息see here。

来源

2016-03-07 06:54:49

我也不需要它。我正在做测试。谢谢你的收获。很有帮助！ – geckob

删除下面的CSS：

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

上面的CSS将影响到不显示边界。因为你已经给出了table.table *所以它将定位表中的所有元素。你已经给0123'所以，没有其他的CSS会覆盖none css。

table.price-table thead tr { 
 
\t \t \t border: 10px solid blue; 
 
\t \t \t outline: thin solid red; 
 

 
    
 
\t \t }

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

 

 

 
    </tr> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
</tbody> 
 
</table>

来源

2016-03-07 06:55:10 ketan

你这个造型

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

是压倒一切的，你用border造型到none怎么一回事，因为的*所有元素。所以如果你想申请，请改变这个属性到你想要的东西。并且请避免使用!important，除非它太重要，并且您想要重写某些库或框架的默认样式。

来源

2016-03-07 06:55:54

试试这个作为你的CSS：

table.table, table.table * { 
    } 

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

检查工作：https://jsfiddle.net/Aschab/6p6kht43/

作为一个建议，如果你需要为你的CSS工作很重要，你这样做是错误的。在盒子外面思考

来源

2016-03-07 06:56:17 Aschab

边框不能像预期的那样工作tr

回答

相关问题