What are some ways to ensure my table adjusts responsively as the window size changes?

I am working on ensuring my table is responsive to different screen sizes.

Initially, the table shrinks perfectly when resizing from right to left.

https://i.sstatic.net/9YM7w.png

However, when I refresh the page on a small window and try to resize it back out, issues arise.

https://i.sstatic.net/Gatcw.png

Currently, this is what I have implemented in CSS:

@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;
    }
}

I have tested this on multiple browsers - Chrome, Firefox, Safari - with consistent results.

Attempt #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;
    }
}

Upon expanding, there are still empty spaces observed on the sides of the table.

javascripthtmlcss

Answer №1

If you want to optimize your table layout, consider using the display property with table-cell for all table data (td) and table headers (th).

@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 performing a reload and the window size is at its smallest, certain children elements are set to display: none - specifically the 2nd, 4th, 5th, 6th, 7th, 8th, and 9th.

If you expand the size back up, these elements do not automatically reset to display.

Therefore, adjustments need to be made in larger media sizes to ensure these elements become visible again.

Below are some suggestions on how to address this visibility issue in larger sizes:

Please pay attention to the comments, especially regarding child 3, as it must always be visible. Additionally, the use of 'display: block' has been employed as a temporary solution; please replace it with the appropriate setting for your specific scenario.

/* IT'S IMPORTANT TO ACCOUNT FOR WIDE SCREENS AS WELL, SO THIS HAS BEEN ADDED */

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

/* Ensuring child 7 displays when the screen width falls within a specific range */
@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;
    }
}

/* For the fourth smallest breakpoint, making sure that child 6 is visible */
@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 the third from smallest breakpoint, ensuring that child 5 is displayed */
@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;
    }

}
/* When approaching the second smallest breakpoint, children 4, 5, 6, 7, 8, 9 are hidden so we want to ensure child 2 (and considering child 3) remain visible */
@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 safe */
        display: block;
    }
    td:nth-child(2), th:nth-child(2) {
        display: block;
    }

}
/* At the smallest breakpoint, where children 2, 4, 5, 6, 7, 8, 9 are hidden. Should child 2 still be 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 №4

Why do you heavily lean on td:nth-child(x) affecting the reusability of your code? Make it so that even when you rearrange the columns, you won't need to modify your CSS.

My suggestion would be to create utility classes and apply those classes to your table columns.

For example:

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

and more. If your HTML/Table is not easily accessible, then unfortunately you'll have to resort to scripting with querySelector, which will impact your reusability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to restrict the amount of user input that is allowed?

Is it possible to restrict the input quantity when using the built-in arrow icon in the text field, but not when typing manually? https://i.sstatic.net/jjogP.png <TextField variant="outlined" label="Quantity" onChan ...

javascriptmaterial-uimern

Ways to retrieve information from a specific key

I'm currently facing a challenge accessing specific data objects that are referenced by keys. In this particular scenario, the "applicant" data is nested within an Event object. My goal is to extract this data and create a new object from it. While I ...

javascriptvue.js

What is the best way to customize the appearance of a non-current month cell within the date picker?

I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...

javacssjavafx

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Currently, I am working with PHP code and here is my complete PHP code: echo "<input type=\"email\" class=\"profil_input_text form-control\" name=\"user_email\" pattern=\"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(& ...

phphtmlinputrequired

Tips on showing binary information as images using extjs 4

As the proud owner of a valid .JPEG image's binary data, I am on a quest to convert this information into an actual viewable image using Python. Seeking advice on how to successfully transform this binary code into a visually appealing .JPEG format w ...

javascriptajaxextjsextjs4

Having trouble executing `npm start` command

After running npx create-react-app and then npm start, I encountered an error message https://i.sstatic.net/Uj5EC.png. Despite following the suggested solutions, the error persists. Any idea why this is happening? ...

javascriptnpm

Clicking on an ID within a jQuery list will return the value

<ul id='myid' > <li>Apple MacBook Pro</li> <li>Apple iPad Pro</li> <li>Apple iPhone 12 Pro</li> <li>Apple Watch Series 6</li> <li>Apple AirPods Pro</li> </ul> ...

javascriptjqueryhtml

Differences Between ES5 and ES6 in Dealing with Arrays in JavaScript

I need assistance with converting the code snippet below as I suspect it is related to an ES5/ES6 compatibility issue. Any help would be highly appreciated. this.rows = Array.from(Array(Math.ceil(this.subCategoryModels.length / 3)).keys()); Upon attempti ...

javascriptarraystypescriptecmascript-6es5-shim

What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...

htmlcss

Using Jquery to handle different status codes in an Ajax request

Currently, I am handling statusCode of 200 and 304 in a jQuery Ajax call. Additionally, I have defined an "Error" function to catch any errors that may occur. If a validation message is related, we specify the status code as 400 - Bad Request. In this sc ...

javascriptjqueryajaxhttp-status-codes

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

javascriptjqueryhtmlcss

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Feeling a bit overwhelmed here, hoping this isn't just a repeat issue. I've come across similar problems but none of the solutions seem to be working for me at the moment. I'm currently utilizing react-signature-canvas for allowing users to ...

javascriptreactjsamazon-s3

Unlocking the path to index.js from a static page in your NodeJS application

Currently, I am immersed in a NodeJS project where a small web server is hosted and a web browser automatically opens to this server when the user inputs the command npm start. The structure of my project directory looks like this: main_directory/ ...

javascriptnode.jsexpressnpm

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

My Vue app has been set up with Ionic 4 using @ionic/vue. Below is the code snippet from the main.js file: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store&apos ...

javascriptvue.jsionic-frameworkionic4ion-menu

Tips for showcasing the lower portion of a picture

I have created a simple slideshow image div. I want to adjust it to show the bottom of the image instead of the top. Here is the HTML Code: <div class="slideshow"> <div> <img src="image1.jpg" /> </div> <div& ...

jqueryhtmlcss

Guide on Redirecting in Express.js

I am seeking assistance with finding solutions. In short, I have created this API () with username: test and token: test. If the current date is past the meeting time, then open the meeting URL in a new tab. This check should occur every second. ...

javascriptjquerynode.jsexpress

Adjusting the size of menus and text on the screen

A while back, I enlisted the services of a web developer to create my website, but unfortunately, it was never properly optimized for resizing windows. Despite numerous attempts to contact him for fixes over the past 5 months, he claims to be too busy at t ...

htmlcss

Exploring the usage of promises with data in VueJS async components

Experimenting with VueJS 2.0 RC and utilizing the fetch API to retrieve data for certain components. Here's a sample scenario: const Component = { template: '#comp', name: "some-component", data: function () { return { basic ...

javascriptasynchronouspromisevue.jsvue-component

Encountering a snag while setting up Google authentication on my website

Currently, I am in the process of integrating Google Authentication into my website. However, I have run into an error related to session management that reads as follows: TypeError: req.session.regenerate is not a function at SessionManager.logIn (C:&bso ...

javascriptreactjstypescriptgoogle-oauth

What are the steps to incorporate PointerLockControl in Three.js?

Having trouble correctly integrating the PointerLockControl in Three.js? Despite trying various examples, errors seem to persist. I've been importing libraries through the head part like this: <script src="lib/controls/PointerLockControls.js"> ...

javascriptthree.jspointerlock