跨浏览器响应式折叠表答案

【问题标题】：Cross-browser responsive collapsing table跨浏览器响应式折叠表
【发布时间】：2017-03-08 12:09:53
【问题描述】：

网上似乎有很多关于这个的，但它令人难以置信的混乱，所以我想尝试得到一个明确的答案。

我有一张桌子，比如 2 列和 2 行。

1 | 2

3 | 4

我希望它在视口需要时折叠成行。

我的代码如下

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable">
    <tr>
        <td>Text 1</td>
    <td>Text 2</td>
    </tr>
    <tr>
        <td>Text 3</td>
    <td>Text 4</td>
    </tr>
</table>

堆叠版的css如下。

.resptable td {display:block;width:100% !important;padding-right:20px;}

这在 FF 和 Chrome 中似乎没问题，但在 Safari 或 IE 中却不行。

奇怪的是（对我来说），附加到 TH 而不是 TD 的相同代码在 Safari 中有效（尽管在 IE 中仍然无效）。

在每个网站都必须响应的世界中，仍然存在数千个跨浏览器/设备问题。

有人知道这个简单任务的明确跨浏览器方法吗？

【问题讨论】：

不要使用表格。表格需要付出很多努力才能做出响应。尝试使用网格系统或 Flex CSS。
感谢@Staveven - 我确信这是一个完全合乎逻辑的建议，我很乐意同意哈哈，但未来我需要检查 Flex 等 :)
我包含了一个使用简单 CSS Flex 命令的快速示例。我将添加另一个使表格具有响应性。
表格用于表格数据。您要做的是布局，这是不同的。见Why not use tables for layout in HTML?
当你需要表格布局时，使用display: table。无需与浏览器争夺所有额外的格式，效果很好。一旦你知道如何正确使用 CSS，你会发现你可以做布局一样快，甚至更快。

标签： html css html-table media-queries

【解决方案1】：

最简单的方法是为 TD 元素指定一个像素宽度。我给了它500px的宽度。这将与视口一起使用，就好像屏幕对于您拥有的任何宽度都足够大，它不会折叠。如果它更小，它将折叠成每行 1 个。以完整模式查看此代码以查看。

.resptable td {display:inline-block; width: 500px; !important;padding-right:20px;}

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable">
    <tr>
        <td>Text 1</td>
    <td>Text 2</td>
    </tr>
    <tr>
        <td>Text 3</td>
    <td>Text 4</td>
    </tr>
</table>

如果您不想使用表格，有很多方法可以实现这一点。在这种情况下，使用表格可能不是您的最佳选择。相反，我创建了一个像表格一样工作的简单格式，但它是响应式的。 *以完整模式查看并缩小屏幕以查看它们折叠。

.parent-wrapper {
    height:100%;
    width:100%;
   
}
.parent {
    flex-wrap: flex;
    margin:-10px 0 0 -10px;
}
.child {
    display: inline-block;
    margin:10px 0 0 10px;
    flex-grow: 1;
    height:100px;
    width: 500px;
}

 <div class="parent-wrapper">
        
        <div class="parent">
            <div class="child">Text1</div>
            <div class="child">Text2</div>
            </div>           
        </div>    
        
        <div class="parent">
            <div class="child">Text3</div>
            <div class="child">Text4</div>
            </div>           
        </div>
                
    </div>

【讨论】：

我对此表示赞同，因为它确实提供了一个有用的表格替代品 - 将进一步研究以供将来使用

【解决方案2】：

正如其他地方所建议的，Doctype 声明是关键。

我认为问题在于没有 doctype 的代码，但它似乎实际上是重要的声明类型。

看来应该是的

<!DOCTYPE HTML>

不是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

修改后的原始代码似乎可以正常运行。感谢@Pangloss 和@Staveven 提供的工作代码，其源代码让我得出了这个结论

【讨论】：