Question 285908 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to make responsive tables in html css

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?

Tags:

2

Answers


  1. 0

    Making tables responsive can be a bit challenging due to their inherent structure, but it’s definitely achievable with some CSS tricks. You can use media queries to change the table layout based on the screen width.

    Here’s an example of how you can create a responsive table:

    .responsive-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .responsive-table tr {
        display: table-row;
    }

    .responsive-table td {
        display: table-cell;
        width: auto;
    }
}
    <table class="responsive-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>
    Login or Signup to reply.
  2. 0

    Tables are automatically "responsive", in that they will resize cells to fit the container — but not to the extent that you’re looking for of having cells wrap to the next line when there isn’t enough room.

    Your desired layout is much more similar to a flexbox layout than a table.

    You can force a table to use flex layout instead of its normal table rules:

    table {display:flex}
tr {display: inline-flex; flex-wrap: wrap}
td {padding: 0.5em}
    <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>

    …but to avoid confusing the next developer to touch your code, it would be better, if possible, to convert your HTML to use divs or spans instead of table tags.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search