How do I make an existing html table responsive?

[carol mcgann]

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 1	Header 2	Header 3
1a	1b	1c
2a	2b	2c
3a	3b	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!

[ALsp]

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.

[BenPleysier]

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 Connec...

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

[ALsp]

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]

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.

[ALsp]

Missed the lowercase "b" 🙂 Still, I'd like to see her find a way to convert to a cross-tab/pivot table for the best presentation. Unfortunately, that requires reworking the darn markup.

[BenPleysier]

Over here we call that a senior moment

[carol mcgann]

ALsp: you say "reworking the darn markup"---how much reworking are you talking about? I did hire someone to do all the Bootstrap work for me; I'm kind of fluent in html but the world is going right on by me with Bootstrap. If it's not too much, might be a possibility. From what I can read about cross-tab/pivot tables, that may be overkill---the data doesn't need any analysis or breakdown, it's mainly stuff like who got first, second, third place and how long the race was. Is this suggestion mainly for appearance and responsiveness?

Ben: thanks for the link to the Bootstrap 4 Tables, it looks like there may be something there. And the methods of fixing the tags with find and replace are helpful. And hey, the senior moment stuff is a little too close to home---ease up!

I will do some more experimenting tomorrow; I may be back!

Thanks---

[BenPleysier]

I think that I have become the expert here. At 75 my daily average is approaching the value of π

[ALsp]

The theory is similar to the old Lotus cross tabs, but is essentially done to keep your headers and their related data together, which your tables, or Bootstrap tables will lose on small devices.

[B i r n o u]

ALsp  a écrit

Unfortunately, that requires reworking the darn markup.

I missed a point, what do you mean by "reworking the darn markup" ?

[ALsp]

Read the page I linked to. You might still miss the point though 🙂  If you do, you can post markup for a table here, and I'll convert it for you. Just make sure you have a header/data relationship going on.

[B i r n o u]

no, in fact, my question was based on the fact that some TABLEs can, by using some rules, either by position or by flexbox... display themselves in a responsive way, without necessarily having to restructure the document... hence my question?

[ALsp]

Yes. You missed the point I'll throw together a quick example for you.

[B i r n o u]

cool.. you're rock!

[ALsp]

MFT Test Page

Click link  at bottom to see converted page.

Workflow:

1. Created base table and styled it as a typical user might. Make your window narrow and you'll see it is not responsive.

2. Used File > Save As to create copy, saved as converted.htm

3. Ran our MFT table converter on it, choosing headers on "Both Left and Right".

Voila

[ALsp]

By the way, although I'm fairly hard in stature, I am not actually a rock 🙂

[B i r n o u]

arf arf !!! humble stance...

[B i r n o u]

ok... got it... thanks for your time and this parser ... it looks cool and nice.

[carol mcgann]

Ben, you got me back into W3Schools site, where I had been but didn't stumble on the page you referenced. While that page didn't work for me, it led me to a solution. I got the bootstrap.css file (which I can understand; not bootstrap.min.css), and found the class "table-responsive". I just pasted all of the code that goes with it into my own .css file, in the category [wrong term? I'm not a pro at this!] "@media screen and (min-width:768px) and (max-width:967px)". And it worked on the pages I've checked, even without removing the size attributes. There is a little place around 750-800 that it goes to a 0-column stacked-row format, but is correct on either side, so I'm going to play with pasting all that code in some other place to see if I can fix that.

This page, 2017 Tour de l'Eurométropole by BikeRaceInfo  has a table that does that.

If this works, I will have almost no work to do to have all the pages work! I know a few tables just won't behave...

Thanks, all!

[BenPleysier]

Great to see that you have (nearly) got the result that you wanted.

Having said that, you can make it even easier on yourself. When I look at

<table cellpadding="0" cellspacing="0" class="tableformat">

  <col width="43" />

  <col width="169" />

  <col width="230" />

  <col width="64" />

  <tr>

    <td width="43">1</td>

    <td width="235">McLay, Daniel</td>

    <td width="267">Fortuneo-Oscaro</td>

    <td width="132">4hr 20min 20sec</td>

  </tr>

I notice that

• <col width ... is not supported in HTML 5
• <td width ... has been set as an absolute value; ideally this should be a relative value like a percentage; but I would try without stipulating the width and let the browser decide.
• cellpadding and cellspacing should be handles in CSS
• if the table class was used instead of tableformat, you could have made use of the bootstrap rules.

These are all easy changes that can be fixed with a find and replace and adding a few extra style rules.

Anyhow, even without the above, the table looks great already.

[carol mcgann]

I'm not surprised there are things that "aren't supported"---parts of this site go back to 1998 and PageMill! Also, most of the data is entered by another person who adjusts column widths by using the cursor to move the border until it looks nice, which results in a number, not a percentage. I know I need to get more of my instructions into CSS---it might happen some day!

This responsive table behavior all happened when I put that "table-responsive" Bootstrap code into my CSS file, and I never actually applied the "table-responsive" class to the table. It just used it---I don't think that's supposed to happen. Remember the last line in my original post: hoping someone has some magic? Well, this one is looking like magic.

Thanks for the kind words!

[ALsp]

Something you might want to do before signing off on a Bootstrap solution is to post a couple of actual page so we can see your actual table data. The wee sample tables you inserted in your post, I assume, are different than your actual tables? The other thing to consider is that the nature of responsive tables is nuanced. Simple tables with a modicum of data, are extremely easy to make responsive. The real problems come to play when your data simply will not display in the allotted horizontal space. When that happens, there is nothing in Bootstrap's bag of tricks to keep your headings, and their related data, together.

[carol mcgann]

Yes, those tables are just what this forum had available to make for a new post; I used them as a demo to show how it behaved.

My entire in-progress site is at bricarol.xyz (most of the tables are in the racing results section), and that site includes the insertion of the Bootstrap "table-responsive" code (see my answer #19 to Ben above) into one of my @media sections in bri-stylesheet-resp.css. Before I inserted the code, the tables didn't work, and after I inserted the code, they did work, but I never applied that class to any tables! I really am not a firm believer in magic, but somehow this one looks like it.

The "tableformat" class is one I created just to make the font smaller in tables so they wouldn't take over. If needed, it could be expanded to have instructions for this problem, as it is applied to a large percentage of my tables. Also, the problem of headings is moot, because I don't think I ever used them. I just formatted the data in the first line to be bold when I wanted a heading.

[ALsp]

I'm afraid that none of my browsers or devices can connect to a site called " http://bricarol.xy/ "