响应式表格拯救你:
/// <table class="response">
<tr>
<td class="short"></td>
<td class="short"></td>
<td class="long"></td>
<td class="short"></td>
<td class="short"></td>
</tr>
</table>
less || CSS
.response{
@media (min-width: 1px) and (max-width:480px) {
width:100%;
display:block;
}
@media (min-width: 480px) {
display:tabel;
width:480px;
}
td{
@media (min-width: 1px) and (max-width:480px) {
display:block;
}
@media (min-width: 480px) {
display:tabel-cell
}
}
.short{
@media (min-width: 1px) and (max-width:480px) {
width:50%;
float:left;
}
}
.long{
word-break:break-all
@media (min-width: 1px) and (max-width:480px) {
width:100%;
float:none;
}
@media (min-width: 480px) {
width:400px;
}
}
}
PS:为毛html代码在SF上做不成代码样式?
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
table其实本身就有一定的自适应能力。
首先你的table的宽度肯定应该要设为100%了吧,这能保证在手机上铺满屏幕而不超出。
接着最好对每一列都按可能出现的字体长度设定好宽度比例,这样不至于有的字太多而挤成像图上的字那样,
当然如果列数太多的话在小的屏幕上怎么都没法做到比较好的显示效果。