表未采用容器CSS的宽度

Question

我的布局如下:左边是一个jstree，左边是一个包含一些输入字段的表。但是，我希望表格不会占据包含div的整个宽度。下面是我的代码：

<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>

Answer 1

因为你有：

width=100%;

并且是

width:100%;

将=更改为:

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>

​

Answer 2

将宽度更改为宽度: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>

​