Bootstrap表格在chrome中不起作用

Question

我想用bootstrap创建一个响应表，我将表的宽度分别分为3-2列的8-2-2。

Firefox可以正确显示，但不能在Chrome中显示。

<table id="tbl_sample" class="table table-hover">
    <thead>
    <tr>
        <th class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">text1</th>
        <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text2</th>
        <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text3</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>DEF</td>
            <td>HIJ</td>
        </tr>
        <tr>
           <td>ABC</td>
            <td>DEF</td>
            <td>HIJ</td>
        </tr>
    </tbody>
</table>

有什么想法吗？我在这里附上了完整的代码 https://jsfiddle.net/ocnrm6j7/