html - 响应式表重新排序

Question

有一个像这样的 HTML 表格:

<table>
    <tr>
        <td>A</td>
        <td>N</td>
    </tr>
    <tr>
        <td>B</td>
        <td>O</td>
    </tr>
    <tr>
        <td>C</td>
        <td>P</td>
    </tr>
    <tr>
        <td>D</td>
        <td>Q</td>
    </tr>
    <tr>
        <td>E</td>
        <td>R</td>
    </tr>
    <tr>
        <td>F</td>
        <td>S</td>
    </tr>
    <tr>
        <td>G</td>
        <td>T</td>
    </tr>
    <tr>
        <td>H</td>
        <td>U</td>
    </tr>
    <tr>
        <td>I</td>
        <td>V</td>
    </tr>
    <tr>
        <td>J</td>
        <td>W</td>
    </tr>
    <tr>
        <td>K</td>
        <td>X</td>
    </tr>
    <tr>
        <td>L</td>
        <td>Y</td>
    </tr>
    <tr>
        <td>M</td>
        <td>Z</td>
    </tr>
</table>

看起来像这样:

一切都很好，现在在小屏幕上我只想有一个 <td>每row但保持正确的“字母顺序”顺序。所以它应该是这样的:

有没有一种方法可以通过 CSS 更改此设置以获得所需的结果？我在这里创建了一个 fiddle http://jsfiddle.net/5eweva69/

Answer 1

我同意使用 DIVS 或其他一些选项，但如果您被困在表格上 - 那么表格中的 div 呢？在这里 fiddle :http://jsfiddle.net/nvnghLn7/

<table>
    <tr>
        <td id="leftSide">
         <div>A</div>
         <div>B</div>
         <div>C</div>
         <div>D</div>
         <div>E</div>
         <div>F</div>
         <div>G</div>
         <div>H</div>
     </td>
     <td id="rightSide">
         <div>N</div>
         <div>O</div>
         <div>P</div>
         <div>Q</div>
         <div>R</div>
         <div>S</div>
         <div>T</div>
         <div>U</div>
     </td>
    </tr>
</table>

然后设置#leftSide 和#rightSide 以在较小的屏幕上显示: block 。 (将 TD 设置为 block 不适用于圆顶文档类型声明，因此完全使用 DIVS 确实是最好的选择。)