如何制作响应式表格 [英] 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?

这是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 插件，也可以帮助您解决这个问题.
• 正如 Elvin Arzumanoglu 发布的那样，这是一个很棒的 示例列表.

• 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屋！