Question

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

我有一张桌子，比如说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中）。

在一个每个网站都必须具有响应能力的世界中，人们相信仍有1000多个跨浏览器/设备问题。

对于这个简单的任务，任何人都有明确的跨浏览器方法吗？

Answer 1

最简单的方法是给TD元素一个宽度（以像素为单位）。我给它宽度为500px。这将与视口一起使用，就像屏幕足够大，无论你有什么宽度，它都不会崩溃。如果它变小，它将逐行崩溃为1。在完整模式下查看此代码以查看。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

Answer 2

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

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

似乎一定是

<!DOCTYPE HTML>

而不是

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

通过此修改，原始代码似乎正常运行。感谢@Pangloss和@Staveven的工作代码，他们的来源使我得出了这个结论

跨浏览器响应式折叠表

2 个答案: