如何制作响应式表格[关闭]

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

这里是Demo http://jsfiddle.net/tvbishan/XYbwW/.

基本上

响应式表格只是一个 100% 宽度的表格。

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

.table {
  width: 100%;
}

<table class="table" border="1">
    <thead>
      <tr>
        <th colspan="2">Table head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </tbody>
  </table>

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

/* When the screen size is bigger than 320px hide the element */
@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

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

更先进的解决方案

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

• css-tricks.com 提供本文 http://css-tricks.com/responsive-data-tables/用于处理大型数据表。
• Zurb 也遇到了这个问题解决了 http://zurb.com/playground/responsive-tables使用 JavaScript。
• 足球鞋 https://fooplugins.com/plugins/footable-jquery/是一个很棒的 jQuery 插件，它也可以帮助您解决这个问题。
• 正如发布者埃尔文·阿尔祖马诺格鲁 https://stackoverflow.com/users/1368240/elvin-arzumanoglu这是一个很棒的示例列表 http://elvery.net/demo/responsive-tables.