div analog

Question

divs를 사용하여 다음과 같은 결과를 얻고 싶습니다. 반응 형으로 만들고 각 테이블 행에 대해 얼마나 많은 열을 조정할 수 있습니다. (예를 들어, 첫 번째 행에는 3 개의 응답 열이 있고, 두 번째 행에는 4 개의 응답 열이 있습니다.) 나 또한 별도의 tr에 하나의 단어를 쓰는 것을 피하려고합니다

할 방법이 있습니까? 여기

는 동일한 레이아웃을 만들 수

<table> 
    <thead> 
     <tr> 
      <th class="short-column">Short Column</th> <!-- th sets the width --> 
      <th class="short-column">Short Column</th> <!-- th sets the width --> 
      <th class="long-column">Long Column</th> <!-- th sets the width --> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td class="lite-gray">Short Column</td> <!-- td inherits th width --> 
      <td class="lite-gray">Short Column</td> <!-- td inherits th width --> 
      <td class="gray">Long Column</td> <!-- td inherits th width --> 
     </tr> 
    </tbody> 
</table> 


table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; } 

.short-column { background: yellow; width: 30%; } 
.long-column { background: lime; width: 40%; } 

.lite-gray { background: #f2f2f2; } 
.gray { background: #cccccc; } 

Here is a fiddle

당신이 삽입하여 TD 요소로 된 div를 떠 경우 가능

<table width="100%" border="0" cellspacing="0" cellpadding="4"> 
      <tr> 
     <td> 
       <!--<div>THREE COLUMNS</div>--> 
      </td> 
     </tr> 
      <tr> 
     <td> 
       <!--<div>FOUR COLUMNS?</div>--> 
      </td> 
     </tr> 
</table> 

Answer 1

같은 것을 사용할 수 있나요 현재 테이블을하다 :

<table width="100%" border="1" cellspacing="0" cellpadding="4"> 
    <tr> 
     <td> 
      <!--<div>THREE COLUMNS</div>--> 
      <div class="three"></div> 
      <div class="three"></div> 
      <div class="half"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <!--<div>FOUR COLUMNS?</div>--> 
      <div class="four"></div> 
      <div class="four"></div> 
      <div class="four"></div> 
      <div class="four"></div> 
     </td> 
    </tr> 
</table> 

너비에 맞는 스타일을 추가하면 모두 설정됩니다!

데모 : http://jsfiddle.net/TdmkG/1/