《关于我在萌娘百科某个条目使用的CSS奇技淫巧，几月后竟遍布整个专题，还成功让MoeSkin在讨论版蒙羞，以及至今都没得到MoeSkin适配这档事》

2021年9月3日，我在萌娘百科刷最近更改时见到了宵宫的条目中超出页面的表格。在该专题，角色的天赋数据是用表格呈现的，嵌入在一张大表中，各级天赋的数据太长，并且设置了width: max-content，撑宽了整个大表，以至于超出页面¹。

我便连着进行了5次丢三落四的编辑，通过CSS令子表能够水平滚动²。

实现方式类似这样：

<!-- 父表 -->
<table>
  …
    <td style="display: block; overflow-x: auto; border: none;">
      <div style="width: 0;">
        <!-- 水平方向很长的子表  -->
        <table style="text-align: center; width: max-content;">
          …
        </table>
      </div>
    </td>
  …
</table>

我使用了一个<div style="width: 0;"> </div>包裹了子表，使得子表水平方向的长度不会影响父表。这样的方法虽然有些阴间但行之有效。那么有没有不那么阴间的方式呢？table-layout: fixed³可以使表格宽度不被内容撑大。但也有缺点——需要手动指定列宽度，如果想要美观的话。

2022年4月，MoeSkin上线。5月，技术实现版出现一个话题——“关于萌皮部分表格显示不正常的问题”，提到表格中需要滚动的内容无法显示，寻求解决办法⁴。举的例子是原神的另一个角色。

MoeSkin上的截图 — 2023年5月6日，MoeSkin上仍然呈现着空荡荡的单元格

我这才知道，当时我在宵宫条目的阴间实现方式，已经被别的编辑者移植到专题中的其他每个角色条目中。~~想想还挺开心的。~~

回到问题，MoeSkin上之所以无法显示水平滚动的天赋数据，是因为MoeSkin本身会给超宽的表格套一个wrapper。这个过程截至目前是无法由编辑者控制的。在正常情况下，它能够使得条目中的表格在wrapper中水平滚动而不破坏页面布局。但这里的wrapper由于有一个宽度是0的爹，它的宽度也成了0，内部的表格便无法显示。

<style>
  .moe-wide-table-wrapper {
    overflow-x: auto;
  }
</style>

<!-- 父表 -->
<table>
  …
    <td style="display: block; overflow-x: auto; border: none;">
      <div style="width: 0;">
        <!-- MoeSkin自动在<table>外添加的wrapper -->
        <div class="moe-wide-table-wrapper">
          <!-- 水平方向很长的子表  -->
          <table style="text-align: center; width: max-content;">
            …
          </table>
        </div>
      </div>
    </td>
  …
</table>

我就在那个话题下面回复：

没准可以指定一个类，表格属于这个类时不加wrapper。

——2022年5月6日

这不是唯一的解决方式，但总得实施一个（实际上后来也有编辑者在少数条目用其他方式解决了问题⁵）。萌百当时的产品经理黑卡回复到：

您好，相关问题已收到，我们将会根据实际情况对相关问题进行修复。

——2022年5月6日

我为什么会想起一年前的这件事？今年3月，萌娘百科技术编辑⁶群里一位大佬问起参与编写MoeSkin的小鱼君，MoeSkin给<table>套wrapper的触发条件是什么，这和当时讨论版上的两个问题——其中一个是持续了大半年的原神角色天赋表格的问题——有关。小鱼君回复触发条件后，分析了一波问题，并试想了解决方案。接着他发了两条消息让我没绷住：

要不干脆简单点

约定一个class，遇到了就不套wrapper（

——2023年3月25日

一年了。黑卡……当时回复“将会根据实际情况对相关问题进行修复”的黑卡早已离职；小鱼君……小鱼君还在提我早就提过的方案；问题……问题还是没有解决……

参考资料