我有一个单行两格的表格。简单的。 (在此处向下滚动一点 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;
}
最佳答案
如果您要显示表格数据,它应该保留在行和列中。如果不是,您可能一开始就不应该使用表——考虑将其替换为有序列表或定义列表,或者只是几个 <div>
s,并根据您的需要设计样式。现在 CSS 足够强大,可以使 HTML 看起来像任何你喜欢的样子,所以 semantic HTML markup是首选的构建方式。
也就是说,做你想做的最简单的方法是:
.bottom-table td {
float: left;
}
关于html - 创建响应式 HTML 表格,以便正确的单元格可以移动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25273227/