是否使第二个表行中的单元格宽度等于第一个表行中的单元格宽度？

debugcn 发表于 Dev

慰藉

我将CSSdisplay属性与和值结合使用table，以表格的形式布局文档。table-rowtable-cell

通常（如您在代码中所见），表格中单元格的大小与包含的内容有关（直到我们提供硬编码的尺寸值。

但我想table-cell在第二个（等等）■table-row具有相同的宽度对应的table-cell从第一table-row。因此，第一宽度table-cell的第二行中是一样的第一宽度table-cell在第一table-row。是否有可能？

我想这样做而不必在第二个和后续的s中添加pixel margin或其他padding属性table-row。我只希望它width使单元格位于其上方。

因此，最后，一列的宽度将等于该列中最宽的单元格的宽度。

我怎样才能做到这一点？

这是小提琴。在代码中，三行具有不同的颜色。

代码：

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group1" value="0" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. </label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <input type="radio" name="radio_group2" value="0" style="display:table-cell;">
        <input type="radio" name="radio_group2" value="1" style="display:table-cell;">
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. </label>
    </div>
</div>

皮特

如果将单元格添加到第一行，然后将输入内容包装在一个跨度中：

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label> 
        <span style="display:table-cell;"></span>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons.</label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="1" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons.</label>
    </div>
</div>