什麼是最有效的方式擺脫表頭的第一個元素的邊界右側？

Question

我有一張桌子，我想擺脫我的th的第一個td的邊界右邊。

---

HTML

<div class="container" <div class="row" style=" margin-right: 15px; margin-left: 15px;"> 
    <div class="col-xs-3"> 
     <div id="piechart"></div> 
    </div> 
    <div class="col-xs-9"> 
     <table class="table table-bordered piechart-key "> 
      <thead> 
       <th colspan="2" ></th> 
       <th></th> 
       <th>Item Summary</th> 
       <th>Item List</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td width="30"></td> 
        <td width="200">&gt; 50% of students answered these items correctly</td> 
        <td width="50">5/25</td> 
        <td width="100">5,10,15,19,23</td> 
       </tr> 
       <tr> 
        <td width="30"></td> 
        <td width="200">50% up to 75% of students answered these items correctly</td> 
        <td width="50">8/25</td> 
        <td width="100">3,7,11,13,14,16,21,22</td> 
       </tr> 
       <tr> 
        <td width="30"></td> 
        <td width="200">&ge; 75% of students answered these items correctly</td> 
        <td width="50">12/25</td> 
        <td width="100">1,2,4,6,8,9,12,17,18,20,24,25</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
</div> 
<hr style="height:5pt; visibility:hidden;" /> 

我已經試過

.table th > td:first-child { 
    border-right: none; 
} 

沒有效果，邊框依然存在。

Here is my JSFiddle

什麼是最有效的方式來擺脫表頭的第一個元素的關閉邊界嗎？

Answer 1

你突出顯示的那個不是邊界它是兩個不同的列。 使用此代碼摺疊他們

 <td colspan="2"> </td> 

Answer 2

你的CSS需要一些改進：嘗試使用table，不.table改正。您將課程分配給表格（class="table table-bordered piechart-key "），該表格似乎沒有使用且不是必需的（您只有一張表格）;班級名稱的措辭相當差，再加上語句本身包含另一個錯誤 - 最後的額外空間。

希望這可能有所幫助。

Answer 3

問題是這樣的規則：

.table td, th { 
    border: #c9cacb solid 1px !important; 
} 

這是壓倒一切的您對邊界進行任何修改。

你需要這樣做：

.table th:first-child{ 
border-right:none !important; 
} 
.table th:nth-child(2){ 
border-left:none !important; 
} 

鑑於第二格的邊框也影響到側邊框。理想情況下，儘可能擺脫第一條重要規則。

編輯：

您發佈

規則

.table th > td:first-child { 
    border-right: none; 
} 

也將無法正常工作，因爲你引用所有表格單元格（「TD」），這是表頭細胞的直接孩子（ 'th'），這不會出現在你的代碼中。

Answer 4

只需複製並粘貼

 <style> 
     table, th, td { 
    border: 1px solid black; 
     } 
    </style> 
     <div class="container" <div class="row" style=" margin-right: 15px; margin-left: 15px;"> 
<div class="col-xs-3"> 
    <div id="piechart"></div> 
    </div> 
    <div class="col-xs-9"> 
     <table class="table table-bordered piechart-key "> 
     <thead> 
      <th colspan="2" ></th> 

      <th>Item Summary</th> 
      <th>Item List</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td width="30"></td> 
       <td width="200">&gt; 50% of students answered these items correctly</td> 
       <td width="50">5/25</td> 
       <td width="100">5,10,15,19,23</td> 
      </tr> 
      <tr> 
       <td width="30"></td> 
       <td width="200">50% up to 75% of students answered these items correctly</td> 
       <td width="50">8/25</td> 
       <td width="100">3,7,11,13,14,16,21,22</td> 
       </tr> 
      <tr> 
       <td width="30"></td> 
       <td width="200">&ge; 75% of students answered these items correctly</td> 
       <td width="50">12/25</td> 
       <td width="100">1,2,4,6,8,9,12,17,18,20,24,25</td> 
      </tr> 
     </tbody> 
     </table> 
     </div> 
     </div> 
     </div> 
     <hr style="height:5pt; visibility:hidden;" /> 

你所談論的第一個TD