How to make responsive tables in html css

November 15, 2023

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?

>Solution :

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.

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)

I took the liberty to provide a NON table version for accessibility