响应式表 [英] Responsive tables

问题描述

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

I am trying to get the table data I'm working on responsive in a way which I don't think is possible as far as I know, unless other people here think it is?

基本上，我有一个表格，最大尺寸显示 TR 内的 3 个 TD 元素.当向下滚动到最小尺寸时，TR 只显示 2 个 TD 元素，之前的第三个 TD 显示在 2 下方.类似这样(或多或少的视觉表示):

Basically I have a table which at max size shows 3 TD elements within a TR. When scrolling down to min size the TR only displays 2 TD elements anymore, where the previously third TD is displayed under the 2. Something like this (more or less visual representation):

最大宽度:

<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 吗?

is this even possible? If so, how to start? Would this require jQuery?

推荐答案

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

Yes it's possible. Set the TD elements to float left and set min-width

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

只需更改容器的大小即可查看它的工作情况.

Just change the size of the container to see it working.

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

I would look into whether or not you need to use a table though. Tables are only used for displaying tabular data these days (we are not in the 90's any more)

编辑

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

I took the liberty to provide a NON table version for accessibility (see @timmied for the reasons why)

http://jsfiddle.net/nW2hx/

这篇关于响应式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！