这是一个如何响应 <table>？

Question

我发现了这个流畅的时事通讯模板模板。我可以理解它是如何工作的：它是一个 100% 宽的 table 和三个 'td's. The first and third 'td ' 环绕第二个 'td' 并且在缩小浏览器 window 的同时可以看到它们的功能。令我困惑的是第二个'td'的固定宽度。

<html>
<head>
    <title>Title</title>
</head>
<body>

<table width="100%">
    <tr>
       <td bgcolor="#ff0000">&nbsp;</td>
       <td width="600" bgcolor="#ffffff">
          
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        </td>
        <td bgcolor="#ff0000">&nbsp;</td>
    </tr>
</table>
</body>
</html>

如您所见，它定义了 600px 的静态宽度，但是当 window 小于 600px 时，它也会像其他两个一样变小 'td 在它旁边，不会给你一个水平滚动条。不是静态宽度定义 "non-fluid" 吗？这是如何工作的？

Answer 1

默认情况下 table 具有 table-layout:auto；这就是它在手机上进行调整的原因。如果设置为table-layout:fixed；然后它会破裂。检查这个 link table-layout

这是一个如何响应 <table>？

How is this a responsive <table>?

html

html-table

fluid-layout