响应表 [英] Responsive tables
问题描述
我想得到我的工作表数据响应的方式,我不认为是可能afaik,除非这里的其他人认为是。
I am trying to get the table data I'm working on responsive in a way which I don't think is possible afaik, 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
只需更改容器的大小就可以看到它的工作。
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)
EDIT
我自由地提供了一个NON表版本的辅助功能(参见@timmied的原因)
I took the liberty to provide a NON table version for accessibility (see @timmied for the reasons why)
这篇关于响应表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!