不使用表標記創建HTML表

Question

我試圖創建一個表，而不使用table標記，只使用CSS中的display: table屬性。但不知何故，這些行沒有正確對齊。單元格的寬度各不相同。第一行的單元格與其他行單元格的寬度不同。 這裏是的jsfiddle一個清醒的認識：http://jsfiddle.net/tryouts/3MVUD/

這裏是我的HTML：

<div class="content"> 
    <header> 
     <span class="title">Title</span> 
     <span class="avail">Avail</span> 
     <span class="list">List</span> 
    </header> 
    <main> 
     <section id="item-1"> 
      <span class="title">Item 1</span> 
      <span class="avail"></span> 
      <span class="list"> 
       <span>One</span> 
       <span>Two</span> 
       <span>Three</span> 
       <span>Four</span> 
      </span> 
     </section> 
     <section id="item-2"> 
      <span class="title">Item 2</span> 
      <span class="avail">Yes</span> 
      <span class="list"> 
       <span>Two</span> 
       <span>Three</span> 
      </span> 
     </section> 
     <section id="item-3"> 
      <span class="title">Item 3</span> 
      <span class="avail"></span> 
      <span class="list"> 
      </span> 
     </section>   
    </main> 
</div> 

這裏是我的CSS：

div.content { 
    display: table; 
    width: 100%; 
    border: 1px solid black; 
} 

div.content header, div.content main section { 
    display: table-row; 
    border: 1px solid black; 
} 

span.title,span.avail,span.list { 
    display: table-cell; 
    width: 33%; 
    border: 1px solid black; 
} 

我不想改變現有的HTML內容，這是使用CSS創建類似結構的表格的主要原因。

Answer 1

您需要添加：

main { display: table-row-group }