使响应式 table 脱离正常 HTML table

Question

所以，

我发了一封电子邮件，HTML4.01 严格使用嵌套表格。

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

比如这样。这份文档中有 800 多行代码。现在我被要求用相同的内容制作一个响应式单页网站。

我的问题是，是否有一种简单或半简单的方法可以用 HTML 个表格制作响应式页面？

如您所见，有很多硬编码的宽度和高度

我很想用一些疯狂的 css 技巧跳过一些工作。我做了 google 搜索并找到了这个 https://www.w3schools.com/howto/howto_css_table_responsive.asp 但它没有做任何事情，至少现在是这样。

Answer 1

样式 1#

我删除了每个 td 和 tr 中的所有像素和点固定大小。它既痛苦又缓慢，我现在更愿意使用#2...

样式 #2

我只是用 bootstrap 网格重做了一切，一旦你理解了 bootstrap 网格，它比在表格中寻找固定大小要快得多。有了模板后，进行更改也会容易得多。

使响应式 table 脱离正常 HTML table

Making responsive table out of normal HTML table

html

css

html-table

html4