3

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

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

4

4 回答 4

4

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

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

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

不过，我会研究您是否需要使用桌子。这些天表格仅用于显示表格数据（我们不再是 90 年代了）

编辑

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

http://jsfiddle.net/nW2hx/

于 2012-12-13T13:41:31.233 回答
4

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

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

正如我在下面的评论中所说，我之所以提到使用其他东西然后是 table 是因为它似乎不代表表格数据。在这里阅读更多：为什么不在 HTML 中使用表格进行布局？

于 2012-12-13T13:41:40.653 回答
4

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

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

于 2012-12-13T14:02:32.807 回答
1

如果您不介意使用 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
于 2016-02-16T11:50:46.600 回答