如何制作响应表

小编典典

css

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

。

阅读 488

2020-05-16

共1个答案

小编典典

响应表只是宽度为100％的表。

您可以使用以下CSS设置表格：

.table { width: 100%; }

[Demo here](http://jsbin.com/OYiRese/1)

您可以通过添加类（或使用进行定位nth-child），根据屏幕尺寸使用媒体查询来显示/隐藏/操作列：

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

HTML

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

2020-05-16