표 태그를 사용하지 않고 HTML 표 생성

Question

table 태그를 사용하지 않고 표를 작성하려고하는데 CSS의 display: table 특성 만 사용하고 있습니다. 하지만 어떻게 든 행이 제대로 정렬되지 않습니다. 세포의 너비는 다양합니다. 첫 번째 행의 셀은 다른 행의 셀과 다른 폭을 갖습니다. 다음은 JSFiddle가 명확한 이해를위한 것입니다 여기에

http://jsfiddle.net/tryouts/3MVUD/ 내 HTML이다 : 나는 기존의 HTML 콘텐츠를 변경하지 않으

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; 
} 

: 여기

<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입니다 그것이 CSS와 같은 구조를 만드는 주요 이유입니다.

Answer 1

당신은 추가해야합니다

main { display: table-row-group }