css - Bootstrap 表格网格在 chrome 中不起作用

Question

我想用 bootstrap 创建一个响应式表，并将表的宽度分别划分为 3 列的 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/