表重新排序响应

有一个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来改变这种只得到想要的结果？我已经在这里创造一个小提琴http://jsfiddle.net/5eweva69/

来源

2014-12-04 caramba

隐藏原始表格并显示另一个表格。（使用CSS'@ media'查询） – 2014-12-04 16:28:09

@SimplyCraig为什么我不喜欢这样的两个原因。 1.表格在网站CMS编辑器（ckeditor或tinyMCE）中生成，因此很难生成第二张表格。2.双重“代码”显示相同并显示/隐藏以便进行响应是坏习惯 – caramba 2014-12-04 16:31:18

使用替代标签（divs或lis等）而不是表格。对于你想要做的事来说，它固有地不灵活。 – Morfie 2014-12-04 16:32:16

我同意使用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为display：block在较小的屏幕。（将TD设置为阻止不适用于圆顶文档类型声明，因此完全使用DIVS实际上是最佳选择。）

来源

2014-12-04 17:08:50 deebs

这里是所有div的小提琴：http://jsfiddle.net/2svbrpgn/ – deebs 2014-12-04 17:50:26

感谢@Morfie并深表您的意见以及您的回答。我将它固定为'

'因为它真的好像是最好的，直到W3C看到我的帖子，并使表格响应:) – caramba 2014-12-08 12:11:02

有没有办法可以使用<table>元素做到这一点，<td>标签意味着一列，<tr>表示一排，没有CSS可以改变这种结构，除非你要求W3C (World Wide Web Consortium) Community谁使HTML标准。

那么你可以使用引导或<div>或<ul>列表

好运虽然达到类似的效果.. :)

来源

2014-12-04 16:55:38 Awesomestvi

谢谢，很好的回答！ +1 – caramba 2014-12-04 17:07:54

表重新排序响应

回答

相关问题