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

Question

尽管我在我的CSS中使用宽度为100％的东西，但我的桌子拒绝伸展到其容器的宽度。我怎样才能伸展它？

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列。 如果您想要全宽表格，请将col-sm-8 col-md-8 col-lg-8更改为col-sm-12 col-md-12 col-lg-12

编辑：

将table课程添加到您的<table>代码中。 Bootstrap有漂亮的类，可以自动使你的表响应。

以下是fiddle