如果父母的宽度为百分比，则使表100%宽度

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>

​

所以我不知道，为什么表的宽度比.输入根长.有小费吗？我也尝试过设置table-layout: fixed;和word-break，但是仍然一样。

编辑

我的代码:

整个输入列表的呈现- http://pastebin.com/jZvzdgyT

单一输入的呈现-在reactjs中写入http://pastebin.com/DEmAdiD2，所以只需查看呈现方法。

图片

仍然比父母的div大

​

家长会-

​

Answer 1

如果表中有以下css，则删除以下内容

table{
    display:block;
}

这将重写表的默认显示模式(display:table)。

删除它可能会解决问题。

Answer 2

使用<table>标签--很好

• 尺寸为3的=>宽度为div#content的33%。
• 输入根的==>宽度是div.size-3的100%，是div#content的33%
• 输入表的===>width是div.input-root的100%，是div#content的33%。

我在下面添加了片段。

​

#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;
    }

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

​

Answer 3

最后找到了解决方案，我只需要把里面的宽度设置为100%，它看起来就像输入的宽度被阻塞的分钟宽度一样。