html - 仅适用于 Firefox 的响应式表格

Question

我正在研究需要与 adobe 贡献兼容的响应式布局。为了使其兼容，我必须使用表格，因此我将 css 应用于表格并使用媒体查询和 float:left。此外，当它们并排时，我必须匹配容器的高度，但是一旦这些容器在较小的屏幕上查看并垂直堆叠，就回到自动高度。（我用纯 CSS 做这个）

如果要在 Firefox 上查看该网站，我完成了创建我需要的内容：这是链接： http ://as.sjsu.edu/ascdc/responsive_home.htm

但是，Chrome 仅将容器显示在彼此下方，因此我必须监督某些内容。

任何帮助将不胜感激！

.container {
    display: table;
    width: 100%; 
    border-spacing: 10px; /*must be px*/
}
.container table {
    display: table-cell;
    background-color: #F2F2F2;
    width: 50%;
    border: 1px solid #E2E2E2;
}

@media only screen and (max-width: 480px) {
.container {
    display: block;
    border-spacing: none;
}
.container table {
    width: 96%;
    float: left;
    margin: 2%;
}
}

Answer 1

我将表格包装在一个 div 中，然后将 css 应用到 div 中，布局现在可以在 Chrome 上运行。