CODEWITHSUNDEEP
htmlcss
coffeeak
coffeeak

Reputation: 3120

Table not taking width of container CSS

I have the following layout: a jstree on the left and a table to the left with some input fields. However, I want the table does not take the whole width of the containing div. Here is my code:

<div id="container" role="main">
    <div id="tree"></div>
    <div id="data">
        <div class="content" style="text-align:center;">
            <table style="border:1px solid #000;width:100%;">
                <tbody>
                    <tr>
                        <td><Label>Label </Label></td>
                        <td><input id="label" name="label" type="text"></td>
                    </tr>
                    <tr>
                        <td><Label>Description </Label></td>
                        <td><textarea id="description" name="description"></textarea></td>
                    </tr>
                    <tr>
                        <td><Label>Detail </Label></td>
                        <td><textarea id="detail" name="description" type="text"></textarea></td>
                    </tr>
                    <tr>
                        <td><Label>condition.disable.link </Label></td>
                        <td><input id="disable-link" name="disable-link" type="text"></td>
                    </tr>
                    <tr>
                        <td><Label>condition.hide </Label></td>
                        <td><input id="hide" type="text"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Upvotes: 0

Views: 74

Answers (2)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Because you have:

width=100%;

and is

width:100%;

Change = to :

HTML

<div id="container" role="main">
    <div id="tree"></div>
    <div id="data">
        <div class="content" style="text-align:center;">
          <table style="border:1px solid #000;width:100%;">
            <tbody>
          <tr><td><Label>Label </Label></td><td><input id="label" name="label" type="text"></td></tr>
          <tr><td><Label>Description </Label></td><td><textarea id="description" name="description"></textarea></td></tr>
          <tr><td><Label>Detail </Label></td><td><textarea id="detail" name="description" type="text"></textarea></td></tr>
          <tr><td><Label>condition.disable.link </Label></td><td><input id="disable-link" name="disable-link" type="text"></td></tr>
          <tr><td><Label>condition.hide </Label></td><td><input id="hide" type="text"></td></tr>
            </tbody>
           </table>
        </div>
    </div>
    </div>

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

Change your width as width:100% 

<div id="container" role="main">
    <div id="tree"></div>
    <div id="data">
        <div class="content" style="text-align:center;">
          <table style="border:1px solid #000;width:100%;">
            <tbody>
          <tr><td><Label>Label </Label></td><td><input id="label" name="label" type="text"></td></tr>
          <tr><td><Label>Description </Label></td><td><textarea id="description" name="description"></textarea></td></tr>
          <tr><td><Label>Detail </Label></td><td><textarea id="detail" name="description" type="text"></textarea></td></tr>
          <tr><td><Label>condition.disable.link </Label></td><td><input id="disable-link" name="disable-link" type="text"></td></tr>
          <tr><td><Label>condition.hide </Label></td><td><input id="hide" type="text"></td></tr>
            </tbody>
           </table>
        </div>
    </div>
 </div>

Upvotes: 0

Related Questions