html - 创建响应式 HTML 表格，以便正确的单元格可以移动到底部

Question

我有一个单行两格的表格。简单的。 (在此处向下滚动一点 http://staging.mragg.com/)现在，由于太宽，iPhone 上的右侧单元格被截断了。有没有办法让正确的单元格下拉并恰好位于 iPhone 屏幕上左侧单元格的下方？

(我已经知道如何针对 iPhone 了……我只需要 CSS 代码，我想，它可以以正确的方式为较小的屏幕拆分表格……)

当前表代码:

.bottom-table  {
background: #323232;
color: #FFFFFF;
border: none;
border-radius: 10px;
width: 80%;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#bottomTable{
margin-top: -30px !important;
margin-bottom: 20px;
}

.bottom-table td {
border: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 40px;
vertical-align: top;
}

.bottom-table td:first-child {
border-right: 1px solid;
border-right-color: #FFFFFF;
}

Answer 1

如果您要显示表格数据，它应该保留在行和列中。如果不是，您可能一开始就不应该使用表——考虑将其替换为有序列表或定义列表，或者只是几个 <div> s，并根据您的需要设计样式。现在 CSS 足够强大，可以使 HTML 看起来像任何你喜欢的样子，所以 semantic HTML markup是首选的构建方式。

也就是说，做你想做的最简单的方法是:

.bottom-table td {
    float: left;
}