對準顯示器列：表

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元素或第一行單元格的寬度。後續行中的單元格不會影響列寬。