CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
user3803747
user3803747

Reputation: 312

How to make table have same width as container?

My table refuses to stretch to the width of its container despite me using stuff like width 100% in my css. How can I get it to 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>

enter image description here

Upvotes: 0

Views: 653

Answers (1)

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

Bootstrap uses a 12 column layout.

In your HTML, you have used 8 columns which leaves 4 columns unused.

Add this class -

table.inner {
  width: 100%;
}

This will make your table width 100% of your 8 columns. If you want full-width table, then change col-sm-8 col-md-8 col-lg-8 to col-sm-12 col-md-12 col-lg-12

EDIT:

Add table class to your <table> tag. Bootstrap has beautiful classes which will automatically make your tables responsive.

Here is the fiddle

Upvotes: 1

Related Questions