Skip to main content
C
carol mcgann
Inspiring
September 24, 2018
Question

How do I make an existing html table responsive?

  • September 24, 2018
  • 3 replies
  • 7151 views

I have an existing Dreamweaver-built site that I am making responsive. It has about 3000 tables in it (data management, not layout), so I really want to find a global solution to making them responsive, I don't want to change the code in each one individually. At this point I have converted it to a bootstrap site, and everything but the tables seems to mostly work.

Now, on narrowing the screen, the tables go to a single column; each row's data is still there, but they are stacked. The first table below (what I'm starting with) becomes the second, which is clearly unacceptable:

Header 1Header 2Header 3
1a1b1c
2a2b2c
3a3b

3c

Header 1

Header 2

Header 3
1a
1b
1c
2a

2b etc.

Most of my tables currently have a class applied to them, so that may offer a global solution, if there might be characteristics that could be added to the existing class.

Possible problem areas: most of the tables have column widths, etc., applied to them, as we were trying to make them most attractive for the desktop (who knew we would need to do something entirely different later?), and those are not even close to all being the same, so "find and replace" won't helpful there. There are also varying numbers of rows and columns across the site.

My current iteration is on line (bricarol.xyz). If you click on "racing results and archives" then "tour de france", there's a big table there, and all my code.

Hoping someone has some magic!

    This topic has been closed for replies.

    3 replies

    P
    Paul-M
    Legend
    September 26, 2018

    <style>

        body {

      font-family: "Open Sans", sans-serif;

      line-height: 1.25;

    }

    table {

      border: 1px solid #ccc;

      border-collapse: collapse;

      margin: 0;

      padding: 0;

      width: 100%;

      table-layout: fixed;

    }

    table caption {

      font-size: 1.5em;

      margin: .5em 0 .75em;

    }

    table tr {

      background-color: #f8f8f8;

      border: 1px solid #ddd;

      padding: .35em;

    }

    table th,

    table td {

      padding: .625em;

      text-align: center;

    }

    table th {

      font-size: .85em;

      letter-spacing: .1em;

      text-transform: uppercase;

    }

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

      table {

        border: 0;

      }

      table caption {

        font-size: 1.3em;

      }

      table thead {

        border: none;

        clip: rect(0 0 0 0);

        height: 1px;

        margin: -1px;

        overflow: hidden;

        padding: 0;

        position: absolute;

        width: 1px;

      }

      table tr {

        border-bottom: 3px solid #ddd;

        display: block;

        margin-bottom: .625em;

      }

      table td {

        border-bottom: 1px solid #ddd;

        display: block;

        font-size: .8em;

        text-align: right;

      }

      table td::before {

        content: attr(data-label);

        float: left;

        font-weight: bold;

        text-transform: uppercase;

      }

      table td:last-child {

        border-bottom: 0;

      }

    }

        </style>

    </head>

    <body>

    <table>

      <caption>

      Accounts Summary

      </caption>

      <thead>

        <tr>

          <th scope="col">Account</th>

          <th scope="col">Due Date</th>

          <th scope="col">Amount</th>

          <th scope="col">PERIOD</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td data-label="Account">JOE BLOGGS</td>

          <td data-label="Due Date">04/10/2018</td>

          <td data-label="Amount">1,090</td>

          <td data-label="Period">03/08/2018 - 03/09/2018</td>

        </tr>

        <tr>

          <td scope="row" data-label="Account">JOHN SMITH</td>

          <td data-label="Due Date">03/10/2018</td>

          <td data-label="Amount">2,653</td>

          <td data-label="Period">02/08/2018 - 02/09/2018</td>

        </tr>

        <tr>

          <td scope="row" data-label="Account">SARAH JONES</td>

          <td data-label="Due Date">03/10/2018</td>

          <td data-label="Amount">1,171</td>

          <td data-label="Period">02/08/2018 - 02/09/2018</td>

        </tr>

        <tr>

          <td scope="row" data-label="Acount">Visa - 3412</td>

          <td data-label="Due Date">02/10/2018</td>

          <td data-label="Amount">899</td>

          <td data-label="Period">01/08/2018 - 01/09/2018</td>

        </tr>

      </tbody>

    </table>

    Paul-M - Community Expert
    C
    carol mcgannAuthor
    Inspiring
    September 26, 2018

    Energize: thanks for this---it looks great, particularly for someone starting anew. I will play with it and see if I can rename things a little and make it work on my existing tables.

    P
    Paul-M
    Legend
    September 27, 2018

    Energize: thanks for this---it looks great, particularly for someone starting anew. I will play with it and see if I can rename things a little and make it work on my existing tables.

    You are welcome

    Paul-M - Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    September 24, 2018

    Have a look at Bootstrap 4 Tables to see how Bootstrap is used to make tables responsive.

    This means that our tables need to be free from attributes like widths and borders.

    Starting with removing the width for the cell as in

    <td width="130">

    we can do a search for

    <td[^>]*?>

    and replace with

    <td>

    or more info have a look at David Powers' article Using regular expressions – Part 1: Understanding the basic building blocks | Adobe Developer Connection

    Although the above will work, Dreamweaver has an even better way as described here Find and replace text, tags, and attributes

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    ALsp
    ALsp
    Legend
    September 24, 2018

    I would be a little leery of doing a site-wide F?R for a site with 3000 tables, but it's good advice. Bootstrap, however, is irrelevant, unless she is using Bootstrap. That said, simply removing width attributes will likely not fix her problem. With data tables you really need to convert to cross-tabs. Have a look at my examples. Bootstrap cannot do that.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    September 24, 2018

    Hi Al, I mentioned Bootstrap because the OP had stated

    At this point I have converted it to a bootstrap site, and everything but the tables seems to mostly work.
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    ALsp
    ALsp
    Legend
    September 24, 2018

    Hi Carol,

    Unfortunately, the way to make the kinds of tables you have responsive is to turn them into cross-tabs. The only way to do that is to alter the markup. There is no way to make your tables meaningfully responsive unless each is converted. We actually have a tool that will do that, but it would take far too long to apply it to 3000 tables. If you want to take a look at the technique (feel free to use our CSS), here is an example:

    PVII MFT: Responsive Tables for Dreamweaver

    Scroll down to the bottom of the page to see examples.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices