使第二个表格行中的单元格宽度等于第一个表格行中的单元格宽度？ [英] Make the width of cells in the second table-row equal to the width of cells in first table-row?

问题描述

我使用 CSS 显示，表格行和 table-cell 值以表格的形式布局我的文档。

I am using the CSS display property with table, table-row and table-cell values to layout my document in the form of a table.

通常（如代码中所示），表中单元格的大小与包含的内容相关（直到我们提供硬编码的维度值。

Normally (as you can see in the code) the size of the cells in the table is related to the content that contain (until we provide hard-coded dimension values.

但我想在 table-cell $ c> table-row 具有与第一个 table-row 相同的宽度 / code>。因此，第二行中的第一个 table-cell 的宽度与第一行的宽度相同<$ c $可以吗？

But I want the table-cells in the second (and so on) table-row to have the same width as the corresponding table-cell from the first table-row. So the width of the 1st table-cell in the second row is the same as the width of the 1st table-cell in the first table-row. Is it possible?

c> table-cell >我想这样做而不必添加像素 margin 或 padding c。> 表格行 s。我只想让它获得 width

I want to do this without having to add pixel margin or padding etc. properties in the second and subsequent table-rows. I just want it to get the width of the cell above it.

最后，列的宽度将等于列中最宽的单元格的宽度。

我该如何做？

在代码中，这三行有不同的颜色。

Here is the fiddle. In the code, the three rows have different colors.

CODE：

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

推荐答案

如果您将单元格添加到第一行，在一个范围内包装您的输入：

If you add a cell to your first row and then wrap your inputs in a span:

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

你应该能够实现你想要的 - 示例

You should be able to achieve what you want - example

标题在一行而不是包装

这篇关于使第二个表格行中的单元格宽度等于第一个表格行中的单元格宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！