3

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1901096
  • 247
  • 4
  • 15

4 Answers4

4

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/

webnoob
  • 15,747
  • 13
  • 83
  • 165
  • Thanks for all the answers! Need to use tables for this, it's how the data is inserted from the CMS. Solution seems to work fine: http://jsfiddle.net/Kvkbe/6/embedded/result/ Made a small change to fill the width when resizing to 2 TD's to 50% min-width. – user1901096 Dec 13 '12 at 14:17
4

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?

Community
  • 1
  • 1
Timmetje
  • 7,641
  • 18
  • 36
  • No problem, a really good solution. But it seems OP does not want to represent actual tabular data. For multiple reason (for example accessibility) OP should take another look at his html. A good read on it can be found here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Timmetje Dec 13 '12 at 13:45
  • 1
    I have edited my example to provide a non table approach to help the war on accessibility :) – webnoob Dec 13 '12 at 13:50
  • Hi timmied, would also have gone for another solution then tables but with how the CMS populates the data this is the only possible way for the moment. – user1901096 Dec 13 '12 at 15:11
4

Please check your query at below link, here you can solve your problem of Responsive table

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

Azhar Shaikh
  • 66
  • 4
1

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
user3392439
  • 973
  • 8
  • 6