如何制作响应式表[关闭]
Posted
技术标签:
【中文标题】如何制作响应式表[关闭]【英文标题】：How to make responsive table [closed] 【发布时间】：2013-08-28 12:20:14 【问题描述】：我有一个表格来表示我的 html 页面中的一些数据。我正在尝试使此表具有响应性。我该怎么做？
这里是Demo。
【问题讨论】：
试试这个google.com/search?q=Responsive+table max-width 做了一些有趣的事情，它类似于width，但是如果屏幕更紧，它会让表格变得更紧。 flexbox 的时代已经来临。 caniuse.com/#feat=flexbox 是的，同意@Toskan。使用 flexbox，如果您不介意用 div 替换语义表，您可以做一些非常有趣的事情。结帐Really Responsive Tables using Flexbox 和相关的代码笔。 这里是一个很好的简单示例：jsfiddle.net/zinoui/tfc0s2mv。只需要复制一些CSS并在<table>标签处设置类名
【参考方案1】：
您可以查看此Demo 或bootstrap
【讨论】：
【参考方案2】：查看以下链接以获取响应表：
http://css-tricks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
【讨论】：
【参考方案3】：基本上
响应式表格只是一个 100% 宽度的表格。
您可以使用此 CSS 设置您的表格：
.table width: 100%;
Demo here
您可以使用媒体查询通过添加类（或使用nth-child 等定位）根据屏幕尺寸显示/隐藏/操作列：
@media screen and (max-width: 320px)
.hide display: none;
HTML
<td class="hide">Not important</td>
更高级的解决方案
如果您有一个包含大量数据的表格，并且您希望使其在小屏幕设备上可读，那么还有许多其他解决方案：
css-tricks.com 提供 this article 用于处理大型数据表。 Zurb 也遇到了这个问题，solved it 使用 javascript。 Footables 是一个很棒的 jQuery 插件，它也可以帮助你解决这个问题。 正如Elvin Arzumanoğlu 所发布的，这是一个很棒的list of examples。【讨论】：
没有我想的任何魔法。我已将我正常的CSS 表格代码复制到@media 并更改参数以与移动屏幕兼容。它奏效了。我认为这是正确的。这是Demo。那是对的吗 ？感谢您的回答。 :)
@Bishan 该演示对我来说看起来不错。虽然你应该只保留操作元素的代码。
对不起。 manipulates the element 表示？
@Bishan 只表示changes the table的css。所以，不要只是复制粘贴你所有的 css 代码并更改它。仅复制移动版本所需的部分。
同时使用table-layout: fixed 可能会有很大帮助。【参考方案4】：
我推荐 Wordpress 插件Magic Liquidizer Responsive Table。
【讨论】：
【参考方案5】：为了制作响应式表格，您可以制作每个“td”的 100% 并在移动设备上的“td”中插入相关标题（减去“768px”宽度）。
查看更多：http://wonderdesigners.com/?p=227
【讨论】：
【参考方案6】：如果您想控制 td/th，就像您可以使用块级元素和浮点数一样： 这是不可能的。 没有办法让 td 在 th 上方或下方浮动。
【讨论】：
【参考方案7】：要制作响应式表格，您可以将每个td 的宽度设置为100%，并在移动浏览器上的td 中插入相关标题（小于768px 宽度。）
这是一个演示此技术的网站：http://www.quizexpo.com/list-of-banks-in-india/
【讨论】：
【参考方案8】：让表格完全响应的纯 css 方式，不需要 JavaScript。在这里查看演示Responsive Tables
<!DOCTYPE>
<html>
<head>
<title>Responsive Table</title>
<style>
/* only for demo purpose. you can remove it */
.containerborder: 1px solid #ccc; background-color: #ff0000;
margin: 10px auto;width: 98%; height:auto;padding:5px; text-align: center;
/* required */
.tablewrapperwidth: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;
/* only for demo purpose just for stlying. you can remove it */
table font-family: arial; font-size: 13px; padding: 2px 3px
table.responsive background-color:#1a99e6; border-collapse: collapse;
border-color: #fff
tr:nth-child(1) td:nth-of-type(1)
background:#333; color: #fff
tr:nth-child(1) td
background:#333; color: #fff; font-weight: bold;
table tr td:nth-child(2)
background:yellow;
tr:nth-child(1) td:nth-of-type(2)color: #333
tr:nth-child(odd) background:#ccc;
tr:nth-child(even)background:#fff;
</style>
</head>
<body>
<div class="container">
<div class="tablewrapper">
<table class="responsive" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
<tr>
<td>RN Kushwaha</td>
<td>rn.kushwaha@test.com</td>
<td>--</td>
<td>Varanasi</td>
<td>-</td>
<td>999999999</td>
<td>022-111111</td>
<td>-</td>
<td>India</td>
<td>165cm</td>
<td>58kg</td>
<td>bright</td>
<td>--</td>
<td>--</td>
<td>03/07/1986</td>
<td>Aryan</td>
</tr>
</table>
</div>
</div>
</body>
</html>
【讨论】：
这只是最简单意义上的“响应式”。当视口太小时，它会导致表格必须水平滚动。一个真正响应式的表格会重新格式化，使其在水平方向上完全可见。 转到链接并单击现场演示会导致 404。以上是关于如何制作响应式表[关闭]的主要内容，如果未能解决你的问题，请参考以下文章