html - 表格不占用容器 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>