How can I resolve the issue of 'overflow-x: auto' not functioning on a table within a CSS Grid to enable scrolling for responsiveness?

Question

How can I resolve the issue of 'overflow-x: auto' not functioning on a table within a CSS Grid to enable scrolling for responsiveness?

I'm in the process of designing a new Wordpress theme and am faced with the challenge of revamping the existing tables within the site's content. While most of my alterations to the table have been successful, I'm encountering an issue when trying to make the table horizontally scrollable on mobile devices by adding 'overflow-x: auto' to its container div. Currently, the table adjusts its width according to the viewport size, but once it reaches its minimum width, it remains fixed and causes the entire page to become scrollable.

Despite researching similar queries on stackoverflow, none of the solutions seem to be effective for me. I've enclosed the table within a div container and applied 'overflow-x: auto', but it doesn't produce the desired effect.

EDIT: Interestingly, the code snippet works correctly on StackOverflow, but fails to function on my Wordpress website. Could this be a compatibility issue with Wordpress?

EDIT 2: Even after installing a table plugin, the problem persists. The plugin creator mentioned that the root cause may lie in my usage of CSS Grid's 'grid-column' property, as the table parent is not responsive. This was something I hadn't considered previously, hence it wasn't included in my code initially. I've made the necessary adjustments to reflect my use of CSS Grid, but the issue still persists as displayed in the StackOverflow code snippet.

html css css-grid

Answer 1

Answer №1

This question may be from a while back, but the problem stems from utilizing the flexible unit Fr in

grid-template-columns: 10px 1fr 10px;

.

To resolve this issue, consider using an absolute value like

grid-template-columns: 10px calc(100% - 20px) 10px;

Answer 2

This question may be from a while back, but the problem stems from utilizing the flexible unit Fr in

grid-template-columns: 10px 1fr 10px;

.

To resolve this issue, consider using an absolute value like

grid-template-columns: 10px calc(100% - 20px) 10px;

Answer 3

Answer №2

Feel free to utilize the following code snippet:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        html, body {
            margin: 0px;
        }
        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 100%;
            border-spacing: 0;
        }
        thead {
            background-color: #efc879;
            font-weight: bold;
        }
        td,
        tr,
        th {
            border: 1px solid #000;
        }
        th,
        td {
            text-align: left;
            padding: 8px;
        }
        th {
            font-weight: bold;
        }
        tr:nth-child(odd) {
            background-color: #ffffff;
        }
        tr:nth-child(even) {
            background-color: #ececec;
        }
        td {
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="overflow-x:auto;">
            <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td>SF</td>
                        <td>CS</td>
                        <td>NM</td>
                        <td>JC</td>
                        <td>JH</td>
                        <td>MT</td>
                        <td>KF</td>
                        <td>TG</td>
                        <td>TOTAL</td>
                    </tr>
                    <tr>
                        <td>Person</td>
                        <td style="background-position: 0% 50%; background-color: black;">XXX</td>
                        <td align="center">0</td>
                        <td align="center">0</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                    </tr>
                    <tr>
                        <td>Person</td>
                        <td align="center">1</td>
                        <td style="background-position: 0% 50%; background-color: black;">XXX</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                        ...

Answer 4

Feel free to utilize the following code snippet:

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        html, body {
            margin: 0px;
        }
        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 100%;
            border-spacing: 0;
        }
        thead {
            background-color: #efc879;
            font-weight: bold;
        }
        td,
        tr,
        th {
            border: 1px solid #000;
        }
        th,
        td {
            text-align: left;
            padding: 8px;
        }
        th {
            font-weight: bold;
        }
        tr:nth-child(odd) {
            background-color: #ffffff;
        }
        tr:nth-child(even) {
            background-color: #ececec;
        }
        td {
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="overflow-x:auto;">
            <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td>SF</td>
                        <td>CS</td>
                        <td>NM</td>
                        <td>JC</td>
                        <td>JH</td>
                        <td>MT</td>
                        <td>KF</td>
                        <td>TG</td>
                        <td>TOTAL</td>
                    </tr>
                    <tr>
                        <td>Person</td>
                        <td style="background-position: 0% 50%; background-color: black;">XXX</td>
                        <td align="center">0</td>
                        <td align="center">0</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">0(d)</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                    </tr>
                    <tr>
                        <td>Person</td>
                        <td align="center">1</td>
                        <td style="background-position: 0% 50%; background-color: black;">XXX</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                        <td align="center">1</td>
                        ...

How can I resolve the issue of 'overflow-x: auto' not functioning on a table within a CSS Grid to enable scrolling for responsiveness?

Answer №1

Answer №2

Similar questions

Ensure that the radio button is set to its default option when the user accesses the page

Tips for customizing the appearance of the <select> <option> element with jQuery or CSS

Issue encountered: The differ cannot recognize the provided object '[object Object]', which is of type 'object'. NgFor is limited to binding Iterables only

PHP Error: Sound Reflection

Ways to delete an image from a batch file uploading feature

Relocate the form element from its current position inside the form, and insert it into a different div

What is the method for retrieving information from a JSON file that has been uploaded?

Slideshow elements removed

Issue with ngShow not functioning when used within an HTML template

Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

Experience the full functionality of Google Maps API without the need for jQuery or PHP with PanTo

How can CSS grids adapt to different screen sizes and resolutions?

The initial item on the list, displayed on the right side in Google Chrome

Troubleshooting problems with a JavaScript game that involves guessing numbers

Inline-block styling behaving incorrectly within span element

Pushing down menu items in a dropdown CSS navigation bar

The dilemma of calculating the total width of jQuery's list items

Ways to align the `<ol>` number at the top vertically

"Encountering a 405 error when transmitting information from an HTML file to a Python Flask server using 'GET / HTTP/1.1'

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?