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>

表没有占用容器CSS的宽度

2 个答案: