Search code examples
htmlcsshtml-tablehtml4

Making responsive table out of normal HTML table


So,

I've made an email, with HTML4.01 Strickly using nested tables.

<body bgcolor="#666666">
    <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#666666">
        <tr>
            <td width="600" height="60">
                <table width="600" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td width="600" height="60" align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF"><br>
                        Etkö näe tätä viestiä?  <a href="#" style="color: #ffffff;">Siirry HTML-versioon</a>
              </span></td>
                    </tr>
                </table>
            </td>
        </tr>

Like this, for example. There is over 800 lines of code in this one document. Now i've been asked to make a resposive single page site out of the same content.

My question is, is there a easy or semi-easy way to make responsive page out of HTML tables ?

As you can see, there is lots of hard-coded widths and heights

I would love to skip some of the work with some crazy css trick. I did a google search and found this https://www.w3schools.com/howto/howto_css_table_responsive.asp but it didnt do anything, atleast for now.


Solution

  • Style 1#

    I removed all the pixel and point fixed sizes inside every td and tr. It was painful and slow and i much rather use #2 now...

    Style #2

    I just redid everything with bootstrap grids, once you understand bootstrap grid, its way faster than looking for fixed sizes in tables. It will also be much easier to make changes once you have your template.