响应式表答案

【问题标题】：Responsive tables响应式表
【发布时间】：2012-12-01 09:53:09
【问题描述】：

我正在尝试以一种我认为不可能的方式响应我正在处理的表格数据，据我所知，除非这里的其他人认为它是可能的？

基本上，我有一个表格，最大尺寸显示 TR 中的 3 个 TD 元素。当向下滚动到最小尺寸时，TR 仅显示 2 个 TD 元素，之前的第三个 TD 显示在 2 下。类似这样的东西（或多或少的视觉表示）：

最大宽度：

<table>
    <tbody>
        <tr> 
            <td>First table data</td>  <td>Second table data</td>   <td>Third table data</td> 
            <td>Fourth table data</td> <td>Fifth table data</td>   <td>Sixth table data</td> 
        </tr>
    </tbody>
<table>

最小宽度：

<table>
    <tbody>
        <tr> 
            <td>First table data</td>  <td>Second table data</td> 
            <td>Third table data</td>  <td>Fourth table data</td> 
            <td>Fifth table data</td>   <td>Sixth table data</td> 
        </tr>
    </tbody>
<table>

这甚至可能吗？如果是这样，如何开始？这需要 jQuery 吗？

【问题讨论】：

什么是“表数据”？纯文字？ *** 您可以使用 CSS 浮动（而不是表格）来实现此功能。
@KyleSevenoaks - 然后设置宽度，使它们包裹在 3 中。 33%。

标签： jquery css html-table responsive

【解决方案1】：

是的，这是可能的。将TD 元素设置为向左浮动并设置min-width

http://jsfiddle.net/RnmLF/1/

只需更改容器的大小即可查看它是否正常工作。

不过，我会调查您是否需要使用表格。表格现在只用于显示表格数据（我们已经不是 90 年代了）

编辑

我冒昧地提供了一个非表版本以供访问（请参阅@timmied 了解原因）

http://jsfiddle.net/nW2hx/

【讨论】：

感谢您的所有回答！需要为此使用表格，这是从 CMS 插入数据的方式。解决方案似乎工作正常：jsfiddle.net/Kvkbe/6/embedded/result 在将 2 个 TD 的大小调整为 50% 最小宽度时进行了一个小改动以填充宽度。

【解决方案2】：

如果您的所有数据单元格都在一行中，则可以这样做。（参见@webnoob 他的解决方案）如果没有，您可能还希望将数据放在 DIV 元素中。他们可以轻松做到这一点。

您没有行或列标题，因此我假设您可以轻松做到这一点，因为您的数据显然与其当前列或行无关。

正如我在下面的评论中所说，我之所以提到使用其他东西然后是 table 是因为它似乎不代表表格数据。在这里阅读更多：Why not use tables for layout in HTML?

【讨论】：

没问题，一个非常好的解决方案。但似乎 OP 不想代表实际的表格数据。出于多种原因（例如可访问性），OP 应该再看看他的 html。可以在这里找到一个很好的阅读：stackoverflow.com/questions/83073/…
我已经编辑了我的示例以提供一种非表格方法来帮助对可访问性进行战争:)
您好，timmied，也可以选择另一种解决方案，然后是表格，但是对于 CMS 填充数据的方式，这是目前唯一可能的方法。

【解决方案3】：

请在下面的链接中查看您的查询，在这里您可以解决您的响应表问题

http://css-tricks.com/examples/ResponsiveTables/responsive.php

【讨论】：

谢谢，在研究的时候也找到了这个链接，但不是我真正需要的解决方案。

【解决方案4】：

如果您不介意使用 div 代替 table/tr/td，这里有一个使用 flexbox 的不同选项的广泛示例：Really Responsive tables using Flexbox。在最复杂的层面上，你会得到如下：

First Second Third Fourth Fifth Sixth Seventh Eighth

First  Third  Fifth Seventh
Second Fourth Sixth Eighth

First   Fifth
Second  Sixth
Third   Seventh
Fourth  Eighth

【讨论】：