首页 文章

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

提问于
浏览 次
1

我使用CSS display property与 table ， table-row 和 table-cell 值以表格的形式布局我的文档 .

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

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. 因此第二行中第一个 table-cell 的宽度与第一个 table-row 中第一个 table-cell 的宽度相同 . 可能吗？

我想这样做而不必在第二个和后续的 table-row 中添加 pixel margin 或 padding 等属性 . 我只是想让它得到它上面的单元格的 width .

So in the end, the width of a column will be equal to that of the widest cell in the column.

我怎样才能做到这一点？

Here is the fiddle. 在代码中，三行具有不同的颜色 .

码：

<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>
html css css3 html-table

2 回答

  • 1

    如果向第一行添加单元格，然后将输入包装在 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>

    你应该能够实现你想要的 - example

    Titles on one line instead of wrapping

    回复于
  • 1

    所有 DIV ， label 和 input 元素都是完全独立的，即使它们被设置为 display: table-cell ，它们也没有内部关系，也没有关于彼此维度的知识 .

    您必须明确定义其宽度以使其宽度匹配 . （那么你基本上不再需要 display -properties了） .

    这是 jsfiddle demo with modifications to your code ：

    http://jsfiddle.net/erlingormar/ga1hzrLd/

    这有一个建议，你可以使用一个修改过的结构来对齐你的元素，而不用在类似于表的布局中考虑它们：

    回复于

相关问题