1

I have the following HTML Table

<table>

  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>

  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>

  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>

</table>

Naturally the above table is displayed as follows

----------------------------------
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
----------------------------------
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
----------------------------------
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
----------------------------------

So what I like to do is create a responsive design, so that when the web-page is viewed in desktop screen, the table is displayed as above, but when the web-page is viewed in a mobile screen, the table is displayed as below

------------
| Cell 1.1 |
------------
| Cell 2.1 |
------------
| Cell 3.1 |
------------

------------
| Cell 1.2 |
------------
| Cell 2.2 |
------------
| Cell 3.3 |
------------

------------
| Cell 1.3 |
------------
| Cell 2.3 |
------------
| Cell 3.3 |
------------

I like to use ONLY CSS to achieve the above. It should look something like this

/* CSS RULES FORE MOBILE */

/* Add here CSS code that makes the table traverse vertically */



@media screen and (min-width: 1280) {

    /* CSS RULES FORE DESKTOP */

    /* Rest CSS rules, to display the table for desktop */
}

I am not sure how to do it, or how to approach this thing altogether. Your help is appreciated. Thanks.

2
  • 1
    I doubt you can achieve this with the table tag and CSS alone as you have explicit grouping by row courtesy of the tr tag. CSS Grid could be of benefit here if you can forego the semantics of the table tag.
    – Jon P
    Commented Apr 8, 2020 at 0:52
  • @JonP - Hmm, I will try that. Thanks for the hint.
    – Greeso
    Commented Apr 10, 2020 at 23:13

2 Answers 2

1

If you know the number of columns, you could maybe do something like this:

table {
  display:grid;
  grid-template-columns:auto 1fr;
}
tbody, tr {
  display:contents;
}
td:nth-child(1) {
  order:1
}
td:nth-child(2) {
  order:2
}
td:nth-child(3) {
  order:3
}
tr:last-child td {
  margin-bottom:10px;
}
td {
  grid-column:1;
  border:1px solid black;
}
<table>

  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>

  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>

  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>

</table>

1
  • It's a good day when you learn something new. Thanks for introducing me to display:contents
    – Jon P
    Commented Apr 8, 2020 at 1:42
1

I wrote some code that allows a user to have multiple responsive tables on your page. From the way you described how you want the responsive view to look I think this could be the solution for you. Although It is not purely CSS it also uses JQuery. I have tried to make it is as simple as possible so people can just download and use the CSS and JS files.

HTML

        <!-- This is populated dynamically with JQuery since Pseudo elements can't be set in JS-->
        <div id="custom-css"></div>
        <!-- DONT DELETE THIS DIV -->

        <div class="table-container">

            <table>
                <tr>
                    <th>TEAM NAME</th>
                    <th>WINS</th>
                    <th>LOSSES</th>
                    <th>GOALS FOR</th>
                    <th>GOALS DIFFERENCE</th>
                    <th>POINTS</th>
                </tr>
                <tr>
                    <td>Team A</td>
                    <td>26</td>
                    <td>1</td>
                    <td>77</td>
                    <td>+57</td>
                    <td>85</td>
                </tr>
                <tr>
                    <td>Team B</td>
                    <td>27</td>
                    <td>4</td>
                    <td>86</td>
                    <td>+64</td>
                    <td>83</td>
                </tr>
                <tr>
                    <td>Team C</td>
                    <td>22</td>
                    <td>10</td>
                    <td>64</td>
                    <td>+30</td>
                    <td>67</td>
                </tr>
                <tr>
                    <td>Team D</td>
                    <td>20</td>
                    <td>7</td>
                    <td>66</td>
                    <td>+26</td>
                    <td>66</td>
                </tr>
            </table>

        </div><!-- close table container -->

        <div class="table-container" style="margin-top:5em">

            <table>
                <tr>
                  <th>CLUB</th>
                  <th>MANAGER</th>
                  <th>COUNTRY</th>
                </tr>
                <tr>
                  <td>Liverpool</td>
                  <td>Jurgen Klopp</td>
                  <td>England</td>
                </tr>
                <tr>
                  <td>Real Madrid</td>
                  <td>Zinedine Zidane</td>
                  <td>Spain</td>
                </tr>
                <tr>
                  <td>Celtic FC</td>
                  <td>Neil Lennon</td>
                  <td>Scotland</td>
                </tr>
                <tr>
                  <td>Tottenham</td>
                  <td>Jose Mourinho</td>
                  <td>England</td>
                </tr>
                <tr>
                  <td>Atlético Madrid</td>
                  <td>Diego Simeone</td>
                  <td>Spain</td>
                </tr>
                <tr>
                  <td>Inter Milan</td>
                  <td>Antonio Conte</td>
                  <td>Italy</td>
                </tr>
            </table>

        </div><!-- close table container -->

CSS:

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

.table-container {
  background: #FFFFFF;
  margin: 2% 1.5%;
  padding: 1%;
  color: #555555;
  font-family: 'Roboto';
  font-size: 13px;
  font-weight: 400; 
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; 
}

/* Table Header Cell and Standard Cell */
th,
td {
  text-align: left;
  padding: 8px; 
}

/* Table Headings */
th {
  color: #555555;
  background: #DDD;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 600; 
}


/* For All Devices Above 600px */
@media only screen and (min-width: 600px) {

  /* Styles the background color off every odd table row */
  tr:nth-child(odd) {
    background: #F2F2F2 ;
  }

}
/* Close Media Query */


/* For All Devices Below 600px */
@media only screen and (max-width: 600px) {

  .container {
    margin: 3.5% 1.5%; 
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; 
  }

  /* Add Border to make easier to read*/
  tr {
    border: 1px solid #ccc; 
  }

  /* Behave  like a "row" */
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 60%; 
  }

  td:nth-child(1) {
    background: #DDD; 
  }

  /* Now like a table header */
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap; 
    font-weight: 600;
  }

  /* Hide Table Headings */
  th {
    display: none; 
  }

}

Javascript / JQuery

function responsiveTable(screenSize) {

     // If media query is below 600px
    if (screenSize.matches) {

        // Array to push up CSS styles too
        var stylesArray = [];

        // Getting the amount of tables
        var tableCount = $('table').length;

        // Iterate through each table
        for(a = 0; a <= tableCount; a++) {

            // Target each indivdual table
            var tableClass  = ".table-container:nth-of-type("+(a+1)+") table";

            // Declaring unique table class
            var newTableClass = "table-"+(a);

            // Add Unique Class to each table occurence
            $(tableClass).addClass(newTableClass);

            // Getting Table Headings for Indivdual Classes
            var tableClassHeading = "."+newTableClass +  " th";

             // Count the table headings
            var tableHeadingCount = $(tableClassHeading).length;

            // Iterate through Table Headings
            for(i = 0; i < tableHeadingCount; i++) {

                // Adding the . notation to make it a class to use with JQuery
                var editedClass = "."+newTableClass;

                // Getting the value of the table heading
                var tableHeading = $(editedClass).find("th").eq(i).html();

                // Creating CSS Style and Setting Table Row (Heading) with Table Heading;
                var cssRole = editedClass+' td:nth-of-type('+(i+1)+'):before {content: "'+tableHeading+'"}';

                // Pushing CSS style to Styles Array
                stylesArray.push(cssRole);

            }// close the i for loop


        } //close the a for loop


        // Building the CSS stylesheet
        var styleSheet = "<style> ";

        // Iterate through each style rule
        for(q = 0; q < stylesArray.length; q++) {

            // Setting the CSS Rule
            var indivdualStyleRule = stylesArray[q];

            // Appending the rule to string
            styleSheet += indivdualStyleRule;
        }

        // Finished CSS Style
        var finishedStyleSheet = styleSheet + " </style>";

        // Add Style to HTML
        $('#custom-css').append(finishedStyleSheet);


    }// close if for media query

    else {

        // Clear all styles that were created
        $('#custom-css').empty();

    }// close else

}// close responiveTable function


// Set the responsive width for tables. Must match value set in css
var smallScreenSize = window.matchMedia("(max-width: 600px)");

// Call listener responsiveTable function at run time
responsiveTable(smallScreenSize); 

// Attach listener function on state changes
smallScreenSize.addListener(responsiveTable);

Here is a working example

Here is the source code

2
  • 1
    Thanks, however is it possible without any scripting? CSS only. As per the comment by @JonP I should use CSS Grid, which I am trying now.
    – Greeso
    Commented Apr 10, 2020 at 23:12
  • I have it working responsively for you but not sure it is displaying the way you want it. Let me know if this ok and I can post you the code as the answer. This is just CSS by the way using media queries
    – Garath
    Commented Apr 11, 2020 at 8:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.