div模擬的響應式列表

我想要使用div來實現類似下面的表格的相同結果，這樣我可以使其響應並調整每個表格行的列數。（例如，在第一行有3個響應列，然後在第二行有4個響應列）。我也想避免在單獨的單詞中寫單個字div模擬的響應式列表

有沒有辦法做到這一點？

這裏是當前表

<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

是否有可能使用類似

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

來源

2013-07-18 cMinor

是這樣的嗎？ http://jsfiddle.net/TdmkG/1/ –

是的，究竟需要什麼。您能否在此發佈代碼，以便我可以接受您的答案，謝謝 – cMinor

如果你插入浮動的div到您的td元素，你可以創建相同的佈局：

<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/

來源

2013-07-18 17:32:51

div模擬的響應式列表

回答

相關問題