问题
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?
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):
Max-width:
<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>
Min-width:
<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>
is this even possible? If so, how to start? Would this require jQuery?
回答1:
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.
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
I took the liberty to provide a NON table version for accessibility (see @timmied for the reasons why)
http://jsfiddle.net/nW2hx/
回答2:
It can be done, if all your data cells are in one row. (See @webnoob his solution )If not, you might also want to put your data in DIV elements. They can do this easily.
You have no row or column header so I assume you can easily do this, because your data obviously have no relation to it's current column or row.
As said in my comment below, the reason why I mention using something else then table is because it seems not to represent tabular data. Read more here : Why not use tables for layout in HTML?
回答3:
Please check your query at below link, here you can solve your problem of Responsive table
http://css-tricks.com/examples/ResponsiveTables/responsive.php
回答4:
If you don't mind using divs instead of table/tr/td, here is one extensive example different options using flexbox: Really Responsive tables using Flexbox. At the most complex level, what you will get is as follows:
First Second Third Fourth Fifth Sixth Seventh Eighth
First Third Fifth Seventh
Second Fourth Sixth Eighth
First Fifth
Second Sixth
Third Seventh
Fourth Eighth
来源:https://stackoverflow.com/questions/13861016/responsive-tables