html – 摆脱表头第一个元素右边界的最有效方法是什么？

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

摆脱表头第一个元素右边界最有效的方法是什么？