如何使响应表 [英] How to make responsive table

问题描述

我有一个表来表示我的html页面中的一些数据。我试图让这个表作为响应。我该如何做？

I have a table to represent some data in my html page. I'm trying to make this table as responsive. How can i do this ?

这里是 演示

Here is the Demo.

推荐答案

基本上

响应表只是一个100％宽度的表。

Basically

A responsive table is simply a 100% width table.

您可以使用此CSS设置表：

You can just set up your table with this CSS:

.table { width: 100%; }

演示这里

您可以使用媒体查询根据屏幕尺寸显示/隐藏/操纵列，方法是添加类使用 nth-child 等）：

You can use media queries to show/hide/manipulate columns according to the screens dimensions by adding a class (or targeting using nth-child, etc):

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

HTML

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

更高级的解决方案

一个有很多数据的表，你想让它在小屏幕设备上可读的还有很多其他解决方案：

More advanced solutions

If you have a table with a lot of data and you would like to make it readable on small screen devices there are many other solutions:

• css-tricks .com提供了本文来处理大型数据表。


• Zurb也遇到了这个问题，并使用javascript 解决了它。


• Footables 是一个很好的jQuery插件，也可以帮助你解决这个问题。


• 由 ElvinArzumanoğlu这是一个非常棒的列表的示例。

• css-tricks.com offers up this article for handling large data tables.
• Zurb also ran into this issue and solved it using javascript.
• Footables is a great jQuery plugin that also helps you out with this issue.
• As posted by Elvin Arzumanoğlu this is a great list of examples.

这篇关于如何使响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！