邊框不能像預期的那樣工作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

回答

相關問題