html表格可以响应式么,是否可以在HTML电子邮件中的td上使用display：block来实现响应式表格设计？...

接受的答案提供了一些很好的信息，但它没有直接解决问题。我最近一直在尝试使用响应式电子邮件，并提出了一些其他可能有用的好解决方案。这里我们继续...

要回答这个问题，您可以使用display:block;使表列在某些移动设备(Android，iOS和Kindle)上表现为行。

下面是一个示例，显示如何在移动设备上创建2列布局堆栈(右列顶部的左列)。

HTML

CSS

@media only screen and (max-width: 640px) {

body[yahoo] .deviceWidth {width:440px!important; } T

body[yahoo] .full {

display:block;

width:100%;

}

}

上述CSS说，如果在屏幕的宽度小于640像素，则td s的一类full应该display:block与width:100%。

现在，让我们来看看更有趣的一点。有时候，您会希望左侧的列在右侧的列下方堆叠。要做到这一点，我们可以在table上使用dir="rtl"来翻转列的顺序。 CSS的保持不变，这里是新的HTML：

HTML

通过添加dir="rtl"我们告诉它扭转列的顺序。第一列(在HTML流中)显示在左侧的第二列(在HTML中)。对于小于640像素的屏幕，其第一列显示第一列(右侧列)，第二列显示第二列(左侧列)。

这里是full HTML and CSS，并附有Gmail和iOS 5的屏幕截图。