Html 表重新排序以响应
具有如下HTML表：Html 表重新排序以响应,html,css,Html,Css,具有如下HTML表： <table> <tr> <td>A</td> <td>N</td> </tr> <tr> <td>B</td> <td>O</td> </tr> <tr> <td>C</
<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>
A.
N
B
O
C
P
D
Q
E
R
F
s
G
T
H
U
我
v
J
W
K
X
L
Y
M
Z
行只有一个
，但保持正确的“字母顺序”。所以看起来应该是这样的：
有没有一种方法可以通过CSS来改变这一点，从而获得所需的结果？我在这里创建了一个fiddle使用元素是不可能的，标记表示一列，表示一行，任何CSS都不能更改此结构，除非您请求制定HTML标准的W3C（万维网联盟）社区
您可以使用bootstrap或或
列表获得类似的结果
祝你好运……） 我同意使用div或其他一些选项，但是如果您被困在表中，那么表中的div呢？在这里拉小提琴：
A.
B
C
D
E
F
G
H
N
O
P
Q
R
s
T
U
然后将#leftSide和#righside设置为在较小的屏幕上显示：block。（将TD设置为block对dome doctype声明不起作用，因此完全使用div确实是最好的选择。）@SimplyCraig我不喜欢这样做的两个原因。1.该表是在网站CMS编辑器（如ckeditor或tinyMCE）中生成的，因此很难生成第二个表。。2.有两个“代码”来显示相同的代码和显示/隐藏响应是一个坏习惯使用替代标记（div或lis等）代替表格。这对你想做的事来说是天生的僵化。@Morfie谢谢你的评论，也许这是唯一的解决办法。我想在stackoverflow上问一下我是否遗漏了一些特别的疯狂css黑客，这里的一些人只是知道很多疯狂的东西……我同意——不值得投反对票。正是由于这种表结构，根本没有办法实现它。div或其他元素是更好的选择。下面我有一个答案，使用JSFIDLE，它混合了表和div。。。但最好避免使用反应灵敏的桌子是的，海报有很多要点，他不是傻瓜。这是一个诚实的问题，所以不要投反对票。caramba，我喜欢下面的@deebs答案。感谢@Morfie和deebs在上面的评论和你的答案。我用
修复了它，因为在W3C看到我的帖子并使表格响应之前，它看起来确实是最好的：）
<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>