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但保持正确的＆＃34;按字母排序＆＃34;订购。所以看起来应该是这样的：

有没有办法通过CSS改变它只是为了得到想要的结果？我在这里创造了一个小提琴http://jsfiddle.net/5eweva69/

Answer 1

使用< table >元素无法做到这一点，< td >标记表示一列，< tr >表示一行，没有CSS可以更改此结构，除非您请求制定HTML标准的W3C (World Wide Web Consortium) Community。

使用bootstrap或< div >或< ul >列表

可以获得类似的结果

祝你好运.. :)

Answer 2

我同意使用DIVS或其他一些选项，但是如果你被困在桌子上 - 表格中的div怎么样？在这里摆弄：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设置为阻止将不适用于圆顶doctype声明，因此完全使用DIVS是最佳选择。）

表重新排序以响应

2 个答案: