对准显示器列：表

Question

我试图渲染HTML table布局与css属性：

display:table, table-row, table-cell... 

下面是我想：

+---------------+---------------------------------------+-----------------+ 
| my li   |   a content in a li   | another content | 
+---------------+---------------------------------------+-----------------+ 
| my li   | a longer content that expend the cell | another content | 
+---------------+---------------------------------------+-----------------+ 
| my li   |  foo bar foo bar in a li  | a content | 
+---------------+---------------------------------------+-----------------+ 

这是什么我得到了：

+---------------+-------------------+-----------------+ 
| my li   | a content in a li | another content | 
+---------------+---------------------------------------+-----------------+ 
| my li   | a longer content that expend the cell | another content | 
+---------------+---------------------------------------+-----------------+ 
| my li   | foo bar foo bar in a li | a content in li | 
+---------------+-------------------------+-----------------------+ 

有没有办法align列没有明确设置width？

下面是代码：

#container{ 
    display: table; 
    border: 1px solid orange; 
} 
#container ul { 
    display: table-row; 
    border: 1px solid cyan; 
} 
#container ul li { 
    display: table-cell; 
    border: 1px solid magenta; 
    vertical-align: middle; 
    text-align: center; 
} 
#container ul li:first-child { 
    text-align: left; 
} 


<div id="container"> 
<ul><li>my li</li><li>a content in a li</li><li>another content</li></ul> 
<ul><li>my li</li><li>a longer content that expend the cell</li><li>another content</li></ul> 
<ul><li>my li</li><li>foo bar foo bar in a li</li><li>a content in li</li></ul> 
</div> 

Answer 1

好的，我检查了代码，它也适用于我，如果我只有我上面写的代码片段。 在我的应用程序，它并没有显示宣称所有li{...}一个float:left的正确，因为......我有

#container ul li{ 
... 
float: none; 
} 

感谢您的帮助纠正它。

Answer 2

添加您#container选择：

#container { 
    display: table; 
    table-layout: fixed; 
    ... 
} 

从MDN's notes on table-layout：

表和列宽由表格的宽度设置和col元素或第一行单元格的宽度。后续行中的单元格不会影响列宽。