EQCSS - 响应表不会恢复到原始样式答案

【问题标题】：EQCSS - Responsive table doesn't revert to original styleEQCSS - 响应表不会恢复到原始样式
【发布时间】：2021-07-02 08:04:36
【问题描述】：

我一直在尝试制作一个响应式表格，如果单元格宽度小于 200 像素，则该表格会折叠，问题是，一旦我折叠表格，单元格的宽度就会变成行的宽度。我知道我需要检查行宽是否大于列数* min-width (200px) 的总和。但是我不知道如何真正实现它，无论我尝试什么都会完全破坏它。

https://codepen.io/scottkane/pen/ExZvbvq

查看 codepen，将窗口变小以查看元素查询是否有效，然后尝试再次将窗口变大并查看它不会恢复样式。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Table</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS.min.js" integrity="sha512-yfw7F0e6Vqdxeg6nDlK4l4+pyBvwozVA61StkFRHcwW2dTAIRa4rfmvi4xXmcRmcnq4NI3jbOY4B8cc25n5SkA==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS-polyfills.min.js" integrity="sha512-Io6cpd8PlB4UY1JYCy1DzrfG+56EWKTXnwi+w9LdfrNiXaAkSI0EQTqRUO6YjMVqWQv6vF/zc4h0uumlPc1XPg==" crossorigin="anonymous"></script>
    </head>
    <body>
        <style>
            body {
                font-family: "Open Sans", sans-serif;
                line-height: 1.25;
            }            

            .table {
                color: #262626;
            }

            .table-head {
                font-size: 0.85em;
                font-weight: bold;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                border-bottom: 1px solid #838383;
            }

            .table-row {
                height: auto;
                display: flex;
                gap: 10px;
                padding: 0.75em;
                border-top: 1px solid #838383;
            }
            
            .table-row > div {
                text-align: center;
                flex-basis: 100%;
            }

            @element .table-row > div and (max-width: 200px) {
                .table-head {
                    border: none;
                    clip: rect(0 0 0 0);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0px;
                    position: absolute;
                    width: 1px;
                }
                
                .table-row {
                    border-bottom: 3px solid #ddd;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 0.625em;
                }
                
                .table-row > div {
                    border-bottom: 1px solid #ddd;
                    display: block;
                    padding: 0.625em;
                    font-size: 0.8em;
                    text-align: right !important;
                    flex-basis: -1px;
                    flex-grow: 1;
                }
                
                .table-row > div::before {
                    content: attr(label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                
                .table-row > div:first-child {
                    padding-top: 0px;
                }
                
                .table-row > div:last-child {
                    border-bottom: 0px;
                    padding-bottom: 0px;
                }
            }
        </style>
        <div class="table">
            <div class="table-row table-head">
                <div>Account</div>
                <div>Due Date</div>
                <div>Amount</div>
                <div>Period</div>
            </div>
            <div class="table-row">
                <div label="Account">Visa - 3412</div>
                <div label="Due Date">04/01/2016</div>
                <div label="Amount">$1,190</div>
                <div label="Period">03/01/2016 - 03/31/2016</div>
            </div>
            <div class="table-row">
                <div label="Account">Visa - 6076</div>
                <div label="Due Date">03/01/2016</div>
                <div label="Amount">$2,443</div>
                <div label="Period">02/01/2016 - 02/29/2016</div>
            </div>
            <div class="table-row">
                <div label="Account">Corporate AMEX</div>
                <div label="Due Date">03/01/2016</div>
                <div label="Amount">$1,181</div>
                <div label="Period">02/01/2016 - 02/29/2016</div>
            </div>
            <div class="table-row">
                <div label="Acount">Visa - 3412</div>
                <div label="Due Date">02/01/2016</div>
                <div label="Amount">$842</div>
                <div label="Period">01/01/2016 - 01/31/2016</div>
            </div>
        </div>
    </body>
</html>

谢谢

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

问题在于 EQCSS 库。

我不知道这个库，所以我无法弄清楚你是没有正确实现它还是它只是写得不好。我怀疑是后者，但我没有足够的信息。

当您的页面加载时，DOM 中会发生以下情况：库的 JS 在加载时会创建一堆空的 <style> 标签，ids 的范围从 data-eqcss-0-0 到 data-eqcss-0-19（可能与页面中找到的库元素的数量）。

它还会在window.resize 上放置一个侦听器。一旦视口低于特定宽度（看起来断点是874px），一些CSS 会被注入到ID 以-0 到-3 结尾的标签中。从那时起，这 4 个 <style> 标记的内容将在每个 resize 事件上重写，始终具有相同的内容，从而使表格以移动模式呈现，即使您超过断点也是如此。我怀疑脚本应该在断点之上清空样式标签，但它失败了（看起来像一个 lib 错误）。

基于视口宽度动态更改<style> 标签内容的整个概念坚定地表明，库的作者对 CSS @media 查询的功能和实用性了解不足（或不了解）。这不是一个好兆头，来自 UI 库的作者。

继续前进，这里有一个可能的解决方法：

我首先尝试清空罪魁祸首 <style> 标记，但如上所述，它们的内容会在下一次 resize 事件中重新添加。

所以我测试了删除它们。果然，这次成功了：表格一旦消失，就会正确呈现。
最好的部分是库可以优雅地恢复。一旦页面再次低于断点，lib 将使用正确的 id 重新添加缺少的 <style> 标记，并使用在移动模式下显示表格所需的代码重新填充它们。当高于断点时，我们的脚本会启动并再次删除它们（基于 id）。

简而言之，hack 有效。请记住，我只能保证它适用于这个特定示例（页面中有更多/更少的 lib 元素，生成的样式标签可能会有所不同，并且脚本可能需要调整）。

在这里查看它的工作原理：https://codepen.io/andrei-gheorghiu/pen/zYNLKWE

请注意，上述解决方案非常激进，绝对不是页面为了使用 UI 库而应该采取的那种破解方式。

我的建议是不要使用这个 hack，而是尝试联系 lib 作者关于该错误并要求他们查看它。这可能是他们已经在更高版本中修复的东西，您可能缺少库的某些必需部分，或者它可能是我们都缺少的东西的副作用，他们可能很容易发现，因为这是他们的代码。

【讨论】：