Solace Solace - 1 month ago 8
CSS Question

Make the width of cells in the second table-row equal to the width of cells in first table-row?

I am using the CSS

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.

But I want the
table-cell
s 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?

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

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

How can I do that?

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>

Answer

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

Titles on one line instead of wrapping

Comments