如果父母有百分比宽度，则使表格宽度为 100%答案

【问题标题】：Make table 100% width if parents have width in percent如果父母有百分比宽度，则使表格宽度为 100%
【发布时间】：2016-12-16 09:20:01
【问题描述】：

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

【问题讨论】：

你能把整个代码加进去吗
我在您的代码中找不到标记！

@PraveenMurali 我现在正在尝试在浏览器中设置它，我正在设置 tbody 元素

标签： html css reactjs width css-tables

【解决方案1】：

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

table{
    display:block;
}

这会覆盖表格的默认显示模式 (display:table)

删除它可能会解决问题

【讨论】：

默认情况下，tbody 有 display: table-row-group 我想，我无法删除它，所以我只能更改属性，有什么提示吗？ :D
如果我有完整的代码会更好。你能用表格的代码设置一个小提琴吗
你没有使用标签

将表格行 <tr></tr> 包裹在 <table></table> 内

即使我将<tbody> 放入<table> ...-> <table><tbody><tr><tr/></tbody></table> 结果相同

【解决方案2】：

使用 <table> 标签就可以了

=> div.size-3 的宽度是 div#content 的 33%
==> div.input-root 的宽度是 div.size-3 的 100%，它是 div#content 的 33%
===>div.input-table 的宽度是 div.input-root 的 100%，它是 div#content 的 33%。

我在下面添加了sn-p。

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

【讨论】：

@LukášUnzeitig 图片无效，如果您发布更多代码，那么只有我们才能给出绝对解决方案。否则我们只能预测它。

【解决方案3】：

终于找到了解决办法，我只需要将内部的宽度设置为 100%，看起来输入的宽度阻塞了最小宽度。

【讨论】：