Question

我试图获取表格数据我正在以一种我认为不可能的方式进行响应，除非其他人认为是这样的？

基本上我有一个表格，其最大尺寸显示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吗？

Answer 1

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

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

只需更改容器的大小即可使其正常工作。

我会考虑你是否需要使用表格。表格目前仅用于显示表格数据（我们不再是90年代了）

修改

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

http://jsfiddle.net/nW2hx/

Answer 2

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

您没有行或列标题，因此我假设您可以轻松执行此操作，因为您的数据显然与其当前列或行无关。

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

Answer 3

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

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

Answer 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

响应表

4 个答案: