使第二個表格中的單元格的寬度等於第一個表格中的單元格的寬度？

Question

我正在使用CSS display property和table,table-row和table-cell值來以表格的形式佈局我的文檔。

通常情況下（你可以在代碼中看到）的細胞的表的大小有關，包含（直到我們提供硬編碼維度值的內容。

但我想table-cell小號在第二個（依此類推）table-row與第一個table-row對應的table-cell具有相同的寬度。因此，第一行中第一個table-cell的寬度與第一個table-row中第一個table-cell的寬度相同。是否有可能？

我想要這樣做，而不必在第二個和後續的table-row s中添加pixelmargin或padding等屬性。我只是想讓它上面的單元格的width。

所以最後，列的寬度將等於列中最寬的單元格的寬度。

我該怎麼做？

Here is the fiddle.在代碼中，三行有不同的顏色。

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 1

如果一個單元格添加到您的第一行，然後在跨度換你輸入：

<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

Answer 2

所有DIV，label和input元素是完全獨立的，並且即使將它們設置display: table-cell他們對彼此的尺寸沒有內部關係，沒有知識。

您必須明確定義寬度以使其寬度匹配。 （那麼你基本上不需要爲他們提供display-屬性）。

這裏有一個的jsfiddle演示與修改您的代碼：

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

這對於修改的結構，你可以用它來調整你的元素，而在表樣佈局考慮他們的建議：