jquery - 如何使表格与容器具有相同的宽度？

Question

尽管我在我的 CSS 中使用了 width 100% 之类的东西，但我的表格拒绝拉伸(stretch)到其容器的宽度。我怎样才能让它拉伸(stretch)？

JSFindle: https://jsfiddle.net/whywymam/fa18e3hn/

HTML:

<div class="Container">
    <div class="row" id="IndivTable">
        <div class="col-sm-8 col-md-8 col-lg-8">
            <div class="clearfix visible-xs-block"></div>

                <div class="table-responsive">
                    <table class="inner">
                        <tr class= "spacing">
                            <td class= "spacing"><span class="names">S No.</span></td>
                            <td class= "spacing"><span class="names">Email</span></td>      
                            <td class= "spacing"><span class="names">No. of applicants</span></td>
                            <td class= "spacing"><span class="names">Action</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Bootstrap 使用 12 列布局。

在您的 HTML 中，您使用了 8 列，剩下 4 列未使用。

添加这个类-

table.inner {
  width: 100%;
}

这将使您的表格宽度为 100%你的 8 列。如果您想要全 Angular 表格，请更改 col-sm-8 col-md-8 col-lg-8至 col-sm-12 col-md-12 col-lg-12

编辑:

添加table给你上课 <table>标签。 Bootstrap 有漂亮的类，可以自动让您的表格响应。

这是 fiddle