将相邻的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;
}

这似乎对我有用，就像你在旧代码中一样。