Make tables more compatible with old browsers

[afmenez]

I was trying to get results for some old browsers, bur unfortunately they can't handle the current page layout.

IE11: locks up on every tab; Opera 7: crashes on every tab; Opera 7.5-10: works on "non-standard", get garbled layout (and missing "results" column) on every other page;

Can't the DOM/js/layout of all tabs be like the "non-standard" tab?

[ljharb]

Seems like a bug to me that the pages don't work on all browsers listed in all the tables.

[chicoxyzzy]

hmm... I think this is a problem with wrong colspan for some columns

[afmenez]

I have run an HTML validator on the problematic pages: https://validator.w3.org/nu/?doc=http%3A%2F%2Fkangax.github.io%2Fcompat-table%2Fesnext%2F And yes, colspan does not match the number of columns in a lot of places.

I believe these are the problems affecting the initial rendering:

1. There are a lot of problems with invalid characters ([, ], #, %), which seem serious to me (see #1144);
2. ~~On all tabs, category titles are one column short.~~ PR #1134 has the fix (already merged);
3. On all tabs, the test lines are initially created with 2 columns missing (current browser result and a spacer), which are then added later dynamically. I believe a better approach would be to create all lines with the correct number of columns, and just fill (or replace) the browser result cell later. I was able to fix build.js to generate the initial table correctly, but I don't know how to fix master.js to replace fill the cells instead of adding new ones (see #1145);
4. The colspan for the "platform type" header is initially wrong. It is corrected dynamically later by setColSpans() on master.js. Since this is the first row, it defines the initial width for the entire table, and I believe old browsers can't handle this. One solution is instead of hard-coding the platform headers on skeleton.html, add them dynamically with the browser headers in dataToHtml() on build.js (see #1146). ~~Another solution could be adding a <colgroup> to each of the platform types, and then use "colspan=0" (which means "span to the end of the colgroup") on the header lines.~~ (removed as this seems to be a Firefox-only feature).

[afmenez]

Another problem is with the obsolete/unstable checkboxes. It seems the results are added/removed by cell, which confuses older browsers (and is slooooow). How about adding/removing entire columns? I believe the "col" element can be used for this:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><th>visible</th><th>hidden</th></tr>
  <tr><td>visible</td><td>hidden</td></tr>
</table>

This would also help with the third issue above, since the table width would be known from the start (See #1147).

[afmenez]

The comments above may imply that I am working on fixes for all the remaining issues, but I don't know enough to do it. I'll leave this to someone more experienced. Would it be OK to open separate issues for each item above?

[ljharb]

That'd be great, yes!

[afmenez]

@Perelandric seems to be making a lot of progress on old browser support. Would you mind taking a look at these issues?

[Perelandric]

@afmenez Yes, I can look at these a little later.

At the same time, I wonder if there has been any discussion about changing the format from the current monolithic table to something that's broken down into separate concerns. It would follow the current organization, but wouldn't stuff it all into one.

I think it would help both with rendering performance and usability of the data.