Question

我有100％宽度的表的问题，我有div内容宽度（以像素为单位），然后所有子div都是百分比并且工作正常，但表没有。

   #content{
        position: fixed;
        float: left;
        top: 116px;
        width: calc(100% - 125px);
        height: calc(100% - 124px);
        background-color: #bdc9ce;
    }
    .size-3{
        width: 33.333%;
    }
    .inputs-root{
        width: 100%;
    }
    .input-table{
        width: 100%;
    }

<div id="content">
       <div class="size-3">
         <div class="inputs-root">
           <tbody class="input-table">
             <tr>....
             </tr>
           </tbody>
        </div>
      </div>
    </div>

所以我不知道，为什么表的宽度比.inputs-root长...任何提示？我尝试设置table-layout: fixed;和word-break，但仍然相同

修改

我的代码：

渲染整个输入列表 - http://pastebin.com/jZvzdgyT

渲染单个输入 - http://pastebin.com/DEmAdiD2 它写在reactjs中，所以只看一下渲染方法

图片

仍然大于父母的div

父母的div -

Answer 1

如果您的表有以下css，请删除此

table{
    display:block;
}

这将覆盖表格的默认显示模式（display:table）

删除它可能会解决问题

Answer 2

使用 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="multiselect" id="order-list"> <tr> <td> <label>Studio:</label> </td> </tr> <tr> <td> <select class="studio"> <option>-- Select Studio --</option> <?php $resultStudio=g etStudioID(); while ($row=m ysqli_fetch_array($resultStudio)) { echo "<option value = '".$row[ 'studio_name']. "'>".$row[ 'studio_name']. "</option>"; } ?> </select> </td> <td> <input id="addrow" class='NewImg' type="image" src="img/add.png" alt="Submit" onClick="return false;" /> </td> <td> <a class="deleteRow"></a> </td>  </tr> </table> 标记它可以正常使用

=＆GT; div.size-3的宽度是div＃content
==＆GT; div.input-root的宽度是div.size-3的100％，它是div＃content的33％
===＆gt; div.input-table的宽度是div.input-root的100％，它是div＃content的33％。

我添加了下面的代码段。

＆＃13;

<table>

＆＃13;

#content{
        position: fixed;
        float: left;
        top: 116px;
        width: calc(100% - 125px);
        height: calc(100% - 124px);
        background-color: #bdc9ce;
    }
    .size-3{
        width: 33.333%;
    }
    .inputs-root{
        width: 100%;
    }
    .input-table{
        width: 100%;
        background-color:red;
    }

＆＃13;

Answer 3

终于找到了解决方案，我只需要将内部宽度设置为100％，看起来输入的宽度被阻挡了最小宽度。

如果父母的宽度为百分比

3 个答案: