如何使用静态宽度行和动态宽度行模拟html表

我需要创建一些类似于旧html表的东西，但是使用css

看看这个结构：

<div id="dad">
    <div id="child-one"></div>
    <div id="child-two"></div>
</div>

• “爸爸”应该有“宽度：100%”
• “子1”应具有“宽度：300px”（静态宽度行）
• “child two”应该具有所有下一个宽度。（dinamic宽度行）

因此，如果“dad”的分辨率为1000px（但是，记住这是100%，而不是1000px。让我们假设用户的分辨率为1000px），那么：

• “儿童一号”应具有300px（永远不变），并且：
• “孩子二号”应该有700px（但是，如果爸爸改变了宽度，就可以改变尺寸）

我该怎么做？ 目前，“childtwo”获取其内容的宽度。示例：如果在子二中有一个宽度为50px的IMG，“子二”将只有50px。。。但我需要700像素

这里是最佳解决方案： 试试这个：

#dad {
   width: 1000px;
}

#child-one {
   width: 30%;
}
#child-two {
   width: 70%;
}

---

也许这就是你要找的

.dad{
    border: 2px solid #000;
    background-color: black;
    width: 100%;
    height: 200px;
    display: table;
}

.child-one{
    background-color: blue;
    width: 300px;
    height: 200px;
    display: block;
}

.child-two{
    background-color: red;
    width: 100%;
    height: 200px;
    display: table-cell;
}

不这是儿童一号的“30%”。。。我需要300像素的儿童一号。记住：静态行（子行1）和Dinamic行（子行2）