html - 跨浏览器响应折叠表

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

我有一张桌子，说2列2行。

1 | 2

3 | 4

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

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中仍然不行）。

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

有人为这项简单的任务提供了明确的跨浏览器方法吗？

最佳答案

最简单的方法是给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>