CSS에서 표제를 만드는 테이블에

Question

표준 <table> 태그를 사용하지 않고 CSS 테이블 (display:table, display:table-row, display: table-cell)을 사용하여 다음 양식을 작성했습니다. 여기까지 아무런 문제도 발생하지 않지만 적용 할 수없는 CSS의 colspans가 필요합니다. 내가 column-span를 사용했지만 효과가 없었습니다!

HTML :

<div id="form"> 
<br/><br/> 
    <form id="form_container"> 
     <span class="row"> 
      <span class="cell"><select></select></span> 
      <span class="cell"><input type="text" /></span> 
     </span> 
     <span class="row"> 
      <span class="cell"><input type="email" /></span> 
     </span> 
     <span class="row"> 
      <span class="cell"><select></select></span> 
     </span> 
     <span class="row"> 
      <span class="cell"><select></select></span> 
     </span> 
     <span class="row"> 
      <span class="cell"><select></select></span> 
     </span> 
     <span class="row"> 
      <span class="cell"><input type="text" /></span> 
      <span class="cell"><select></select></span> 
     </span> 
     <span class="row"> 
     <span class="cell"><input type="checkbox" /><b>I have read the</b> <a>Terms & Conditions</a></span> 
     </span> 
     <input type="image" src="img/send_button.png" /> 
    </form> 
</div> 

CSS :

#form_container { 
    display: table; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    display: table-cell; 
} 

input, select { 
    padding: 5px; 
    border-radius: 5px; 
} 

Fiddle.

나는 단지 하나 개의 셀이 행에 열 병합을 원한다. CSS로 가능합니까?

Answer 1

table으로 단장 한 div은 처음에는 잘못 냄새가났습니다. 나는 그것을 피합니다. 그러나 타겟이 최신 브라우저라면 nth-child pseudo selector를 사용할 수 있습니다.

/* one item */ 
.cell:first-child:nth-last-child(1) { 
    width: 100%; 
} 

/* two items */ 
.cell:first-child:nth-last-child(2) { 
    width: 50%; 
} 

예상 결과와 비슷합니까? http://jsfiddle.net/dZuAh/3/?