CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AgainMe
AgainMe

Reputation: 780

Cannot get all parent container width

I'm trying to display the table on all container width, actually I'm using the col-sm-2 class and the hideable-sidebar of bootstrap. This is my html structure:

<div class="col-sm-2 hideable-sidebar" id="resource_container">

            <h4>Resource</h4>

            <div class="input-group">
                <input type="text" placeholder="search" class="form-control" >
                <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    </span>
            </div>

            <table style="margin-top: 10px; height: 396px;" border='1'>
            <tr id="res-1"><td style="background-color:#FF000C" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            </table>

        </div>

And here the JSFIDDLE

This is an image of the final result that I need to take:

enter image description here

Upvotes: 1

Views: 34

Answers (2)

Hardik Kalathiya
Hardik Kalathiya

Reputation: 2253

Here is the full code..

Just copyand past it..

<div class="col-sm-2 hideable-sidebar" id="resource_container">

                <h4>Resource</h4>

                <div class="input-group">
                    <input type="text" placeholder="search" class="form-control" >
                    <span class="input-group-btn">
                        <button class="clear btn btn-default" type="button">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                        </span>
                </div>

                <table border='1' style="margin-top: 10px; height: 396px; width: 100%;">
                <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                <tr id="res-1"><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
                </table>

            </div>

Upvotes: 0

jsadev.net
jsadev.net

Reputation: 2590

Just add width: 100%; to your Table like i did here: https://jsfiddle.net/DTcHh/28309/

I hope it is what you are searching for :)

Upvotes: 1

Related Questions