如何制作响应表

Question

我有一个表来表示我的html页面中的一些数据.我正在尝试使这个表格具有响应性.我怎样才能做到这一点？

这是Demo.

Answer 1

基本上

响应表只是一个100%宽度的表.

您可以使用此CSS设置表:

.table { width: 100%; }

您可以使用媒体查询根据屏幕尺寸显示/隐藏/操纵列,方法是添加类(或使用nth-child等目标):

@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

<td class="hide">Not important</td>

如果您有一个包含大量数据的表,并且您希望在小屏幕设备上使其可读,那么还有许多其他解决方案:

我认为没有任何**魔法**.我已经将我正常的`CSS`代码复制到`@media {}`并将参数更改为与移动屏幕兼容.它奏效了.我认为这是正确的.这是[演示](http://jsbin.com/EvOZoyE/1/).那是对的吗？感谢您的回答.:) (2认同)

Answer 2

检查以下链接以获取响应表:

Answer 3

您可以查看此演示或引导程序