如何最有效地去掉表头第一个元素的右边框？

Question

我有一个表格，我希望去掉表头第一个 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;
}

没有效果，边框仍然存在。

这是我的JSFiddle

如何最有效地去掉表头第一个元素的右边框？

- code-8

---

你在谈论第一个td或th，如图所示是th，有点困惑。 - Leo the lion

你收到我的代码了吗？还需要我改进它吗？ - Mudassar Saiyed

你能把相关的CSS放在这里吗？ - Mudassar Saiyed

点击JSFiddle以查看您所需的一切。 - code-8

Answer 1

您所突出显示的不是边框，而是两个不同的列。 使用此代码将它们折叠起来：

突出显示的是两个不同的列，不是边框。使用以下代码将它们折叠起来：

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

- Mudassar Saiyed

Answer 2

问题出在这个规则上：

.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;   
}

鉴于第二个单元格的边框也会影响侧边框。但是如果可能的话，最好摆脱第一个important规则。

编辑：

您发布的规则

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

此方法也行不通，因为您正在引用所有表格标题单元格（“th”的直接子级）的所有表格单元格（“td”），而这种情况不会出现在您的代码中。

- JaanRaadik

Answer 3

你的CSS需要改进：尝试使用table而不是.table进行更正。你给表格分配了类（class="table table-bordered piechart-key "），这似乎没有被使用和不必要（你只有一个表格）；类名命名不太合适，而且语句本身还包含另一个错误-末尾多余的空格。

希望这可以帮到你。

- Alexander Bell

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;" />

- Mudassar Saiyed