What is the most efficient way to get rid off border-right of the first element of table header?

Question

I have a table, I want to get rid off border-right of the first td of my th.

---

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

I've tried

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

No Effect, and the border is still there.

Here is my JSFiddle

What is the most efficient way to get rid off border-right of the first element of table header ?

Answer 1

The one you are highlighting is not the border it is two different column. use this code to collapse them

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

Answer 2

The problem is this rule:

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

This is overriding any modification you make to the border.

You'll need to do this:

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

given that the second cell's border also affects the side border. Ideally though, get rid of the first important rule if you can.

Edit:

The rule you posted

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

also won't work, as you're referencing all table cells ('td') which are direct children of table-header cells ('th'), which won't occur in your code.