html - 使 <td> 表现得像 div 并忽略 <tr> 的方法？

Question

我有一个包含 2 行 5 列的表格。

对于移动优化，我想要 <td> s 表现得像 float div 给我 2 列 5 行。

为此，我创建了:

@media (max-width: 600px) {
   table td {
        float: left;
        width: 50%;
    }
}

这有效，但我仍然得到一个分离，其中两个 <tr>我们见面吧我得到一列 6 和一列 4，而不是 2 列 5。

参见 fiddle :https://jsfiddle.net/xjzpaudr/20/

谁知道是否有办法删除 <tr>不影响它们的子元素？

Answer 1

尝试添加 table tr { display: inline; 在你的媒体查询中:

@media (max-width: 600px) {
   table tr { display: inline; }
   table td {
        float: left;
        width: 50%;
    }
}

https://jsfiddle.net/xjzpaudr/21/