顯示相鄰的td之一

Question

我有四列的表格。我試圖讓第二列單元格在第三列單元格下的第一列單元格和第四列單元格下面，當視口足夠窄時。我在這裏的解決方案適用於IE8 +，但它很笨拙。有沒有更好的方法來達到相同的結果？

演示： http://jsfiddle.net/hhyen16/6ttc7z03/1/

代碼：

@media screen and (max-width: 600px) { 
 
    .inner { 
 
    display: table-row; 
 
    width: 100%\9; 
 
    float: left\9; 
 
    } 
 
}

<table> 
 
    <tbody> 
 
    <caption>TDs to ROWs</caption> 
 
    <tr> 
 
     <td> 
 
     <table> 
 
      <thead> 
 
      <th class="inner">One</th> 
 
      <th class="inner">Two</th> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td id="one" class="inner">cell 1 with some long text</td> 
 
       <td id="two" class="inner">cell 2 with some long text too</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
     <td> 
 
     <table> 
 
      <thead> 
 
      <th class="inner">Three</th> 
 
      <th class="inner">Four</th> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td id="three" class="inner">cell 3 with some long text</td> 
 
       <td id="four" class="inner">cell 4 with some long text as well</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" </script>

Answer 1

你在表中使用表之前，我沒有注意到，但它似乎沒有必要。見fiddle

<table> 
    <tbody> 
     <caption>TDs to TABLE ROWs (table inside table)</caption> 
     <tr> 
      <td> 
       <td id="one" class="inner">cell 1 with some long text</td> 
       <td id="two" class="inner">cell 2 with some long text too</td> 
      </td> 
      <td> 
       <td id="three" class="inner">cell 3 with some long text</td> 
       <td id="four" class="inner">cell 4 with some long text as well</td> 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS

@media screen and (max-width : 600px) { 
    .inner { 
     display:table-row; 
     width:100%; 
     float:left; 
    } 
} 
#one { 
    background-color: yellow; 
} 
#two { 
    background-color: green; 
} 
#three { 
    background-color: gray; 
} 
#four { 
    background-color: orange; 
} 

這似乎爲我的工作方式相同，因爲它在你的舊代碼工作。