html - 表格的内边框在 Internet Explorer 9 (IE 9) 中不会拉伸(stretch)整个表格

Question

我正在使用 Angular Responsive Table我的表的插件。最初，它不能在 IE 9 上运行，但多亏了另一个 SO 成员，我能够通过向表的元素添加“float: left”来为 IE 9 修复它。现在，在 IE 9 中，内表边框不会一直延伸，而是在右栏中的文本结束后立即停止。 (在图片中可能很难看到)。

CSS

<!--[if IE]>
<style>
    .table tbody tr td { float: left; }
</style>
<![endif]-->

HTML

<table class="table table-bordered table-striped table-hover" wt-responsive-table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Version</th>
            <th>Language</th>
            <th>Maintainer</th>
            <th>Stars</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in ctrl.projects">
            <td>{{item.name}}</td>
            <td>{{item.version}}</td>
            <td>{{item.language}}</td>
            <td>{{item.maintainer}}</td>
            <td>{{item.stars}}</td>
        </tr>
    </tbody>
</table>

Plunker Demo

附带说明一下，有一个 jQuery 插件 ( Tablesaw: Stack only ) 具有类似的功能，而且它似乎可以开箱即用地与 IE 9 一起使用，没有任何问题!

Answer 1

由于 float 元素只会增长到与其内容一样大，因此您需要明确设置宽度以便它们拉伸(stretch)，因此如果您像这样更改 CSS，它将起作用。

@media only screen and (max-width : 800px) {
    .table tbody tr td {
        float: left;
        width: 100%;

    }
    .table {
        overflow: hidden;
    }
}