如何用CSS实现table中SVG的自适应宽度布局？

我有一个包含2个<svg>元素的<table>：

<table>
    <tbody>
        <tr>
            <td>
                <svg/>
            </td>
            <td>
                <svg/>
            </td>
        </tr>
    </tbody>
</table>

这些SVG用于在指定宽高的<image>上绘制图形，示例如下：

<svg viewbox="0 0 100 100">
    <image href="/my_image.png"/>
    <rect x="10" y="10" width="80" height="80"/>
</svg>

该table设置了max-width，通常为100%以避免超出屏幕宽度，也可能是固定值如800px或受容器限制。

需求 #

1. 当SVG总宽度小于屏幕宽度时，table宽度等于两个SVG宽度之和，例如左SVG宽100px、右SVG宽200px、屏幕宽500px时，table宽300px；
2. 当SVG总宽度大于屏幕宽度时，table适配屏幕宽度，SVG按原比例缩放，例如左SVG宽2000px、右SVG宽1000px、屏幕宽1500px时，table宽1500px，左SVG缩至1000px，右SVG缩至500px。

已尝试方法 #

• 为SVG设置与图片尺寸一致的viewbox，无效；
• 为SVG添加width属性和style中的width样式，无效；
• 尝试为SVG设置max-width，也无效。

请问仅用CSS能否实现该效果？同时需要考虑table单元格中可能包含其他元素的通用情况，该如何实现？

仅用CSS完全可以实现，核心是利用表格布局特性结合自适应规则处理，同时兼顾通用场景：

1. 表格基础布局配置 #

先给table设置核心规则，确保它能在两种需求场景下切换：

table {
  max-width: 100%; /* 按需求替换为固定值如800px也可 */
  width: fit-content; /* 内容总宽度不足时，表格宽度等于内容宽度之和 */
  border-collapse: collapse; /* 消除单元格默认间隙，可选 */
}

2. SVG与单元格的缩放规则 #

通过单元格和SVG的样式设置，实现按比例缩放的效果：

td {
  width: 1%; /* 关键：内容不足时被SVG撑开，内容溢出时按原始宽度比例分配空间 */
  white-space: nowrap; /* 避免单元格内元素换行破坏布局 */
}

svg {
  max-width: 100%; /* 确保SVG不超出单元格宽度 */
  height: auto; /* 保持SVG原始宽高比 */
  display: block; /* 消除SVG默认行内元素的底部间隙 */
}

3. 通用场景适配（单元格含其他元素） #

如果单元格内还有文本、图片等其他元素，添加统一的自适应规则即可：

td > * {
  max-width: 100%;
  height: auto;
  display: block; /* 统一块级显示，避免间隙和换行问题 */
}

效果验证 #

• 场景1（内容总宽度小于容器）：表格宽度自动等于两个SVG宽度之和，单元格宽度匹配对应SVG的原始尺寸，SVG正常显示；
• 场景2（内容总宽度大于容器）：表格被max-width限制在容器宽度内，两个单元格按SVG原始宽度的比例分配可用空间，SVG自动按比例缩放。

内容的提问来源于stack exchange，提问作者hopeless-programmer