How can I make table responsive while window resizing?

Question

I have a table, I’m trying to make it responsive.

When I resize from right to left, it shrinks perfectly

While at the small window, I hit refresh and try to resize it back out

This is what I did for CSS for now

@media only screen and (max-width: 1555px) {


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

}

@media only screen and (max-width: 1080px) {


    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }
}

@media only screen and (max-width: 840px) {


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }
}

Note: I've tried this on all browser types: Chrome, Firefox, Safari, same result.

---

Try #2

@media (min-width: 1300px) and (max-width: 1555px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }
}


@media (min-width: 1200px) and (max-width: 1300px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

}


@media (min-width: 840px) and (max-width: 1200px) {

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }



}

@media (min-width: 520px) and (max-width:  840px) {


    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

}

@media (max-width: 520px) {


    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }


}

When I expand, I still see that spaces in the side

Answer 1

I would suggest you to enable all the table data (td) and table headers (th)using display: table-cell.

@media (min-width: 1300px) and (max-width: 1555px) {

th, td { 
  display: table-cell;
} 

th {
    color:brown;
}

td:nth-child(9),th:nth-child(9)  {
    display: none;
}

td:nth-child(8),th:nth-child(8)  {
    display: none;
}
}


@media (min-width: 1200px) and (max-width: 1300px) {

th, td { 
  display: table-cell;
}

th {
    color:brown;
}

td:nth-child(9),th:nth-child(9)  {
    display: none;
}

td:nth-child(8),th:nth-child(8)  {
    display: none;
}

td:nth-child(7),th:nth-child(7)  {
    display: none;
}

}


@media (min-width: 840px) and (max-width: 1200px) {
    th, td { 
  display: table-cell;
}

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }



}

@media (min-width: 520px) and (max-width:  840px) {

    th, td { 
  display: table-cell;
}

    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

}

@media (max-width: 520px) {

    th, td { 
     display: table-cell;
    }

    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }
    }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

@media (min-width: 520px) and (max-width:  840px) {

    th, td { 
  display: table-cell;
}

    th {
        color:orange;
    }


    td:nth-child(3),th:nth-child(3)  {
        display: none;
    }

}

@media (max-width: 520px) {

    th, td { 
     display: table-cell;
    }

    th {
        color:yellow;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }

    td:nth-child(3),th:nth-child(3)  {
        display: none;
    }    
}

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

OR JS fiddle link

Answer 2

When you do a reload and you are in the smallest window size, the 2nd, 4th, 5th, 6th, 7th, 8th and 9th children are set to display: none.

As you expand the size back up nothing resets any of these to actually display.

So you need to do something in the larger media sizes which sets them to display as you come back up.

Here's some ideas on how to make sure that elements get seen at the larger sizes.

Please read the comments, especially about child 3 - is it always visible? And I've put display: block to show a child but I have no means of knowing whether that is the setting that is normal in your elements. Please replace with whatever is correct for your particular use case.

/* DONT FORGET WE NEED TO COPE WITH A WIDE SCREEN SO I'VE ADDED THIS */
    
    td:nth-child,th:nth-child  {
        display: block;
    }
    
/* we need to make sure that child 7 comes back into view */
@media (min-width: 1300px) and (max-width: 1555px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }
    
    td:nth-child(7),th:nth-child(7)  {
        display: block;
    }
}

/* at this, the 4th smallest, we need to make sure that child 6 comes back into view */
@media (min-width: 1200px) and (max-width: 1300px) {

    th {
        color:brown;
    }

    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }
    
    td:nth-child(6),th:nth-child(6)  {
        display: block;
    }

}

/* at this 3rd from smallest we need to make sure that child 5 comes back into view */
@media (min-width: 840px) and (max-width: 1200px) {

    th {
        color:red;
    }



    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(5),th:nth-child(5)  {
        display: block;
    }

}
/* at the next to smallest the 4, 5, 6, 7 8, 9 children are display: none so we need to make sure that child 2 (and see comment below about child 3) is/are displayed */
@media (min-width: 520px) and (max-width:  840px) {


    th {
        color:orange;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }
    
    td:nth-child(2),th:nth-child(2)  {
        display: block;
    }
    td:nth-child(3),th:nth-child(3)  { /* just to be on the safe side */
        display: block;
    }
    td:nth-child(2),th:nth-child(2)  {
        display: block;
    }

}
/* when very small the 2, 4, 5, 6, 7, 8, 9 children are display: none. DID YOU MEAN TO KEEP CHILD 2 DISPLAYED? */
@media (max-width: 520px) {


    th {
        color:yellow;
    }


    td:nth-child(9),th:nth-child(9)  {
        display: none;
    }

    td:nth-child(8),th:nth-child(8)  {
        display: none;
    }

    td:nth-child(7),th:nth-child(7)  {
        display: none;
    }

    td:nth-child(6),th:nth-child(6)  {
        display: none;
    }


    td:nth-child(5),th:nth-child(5)  {
        display: none;
    }

    td:nth-child(4),th:nth-child(4)  {
        display: none;
    }

    td:nth-child(2),th:nth-child(2)  {
        display: none;
    }

}

Answer 3

For those who are fine with libraries , might I say that I strongly suggest DataTable Library. Leave the CSS , dynamic resizing etc issues to the library.

Check this example and try resizing a console panel over it: https://datatables.net/examples/basic_init/zero_configuration.html

Answer 4

Why you are relying so much on on td:nth-child(x) impacting your code reusability, make it such that: even if you move the columns you do not have to touch your css.

I would suggest creation of utility classes and add those classes to your table columns.

eg:

.hidden-mobile 
@media (max-width: 450px) {
  display: none;
}

and so on. If your HTML/Table is not accessible than unfortunately you have to access it though script using querySelector impacting your reusability.