为什么在<table>单元格中使用SVG会强制表格宽度为100%？

Question

我正在构建一个表格，应该以合理的方式显示数据。如果不需要占用100％的宽度，就不应该占用。

问题在于，我在一列中使用折线图，当我使用div构建该图表时，它运行良好，但是当我使用SVG时，表格会占用100％（我更喜欢使用SVG，因为它更灵活）。

下面是这个表格应该看起来像的样子（如果使用div而不是SVG来显示折线图，则是这样的）:

而当使用SVG时，表格会占用整个页面宽度，效果如下：

我认为这是因为SVG试图获取尽可能多的空间，并将表格膨胀到100％。

如何解决这个问题？我正在使用固定布局和固定百分比列宽的表格。我不知道将要在表格中显示的数据和表格宽度，因此表格应该自动确定最佳宽度。

简化示例：

table { table-layout: fixed; max-wdith: 100% }
tr > * { border: 1px solid black; }
svg { display: block; }

<table>
  <tr>
    <th style="width: 50%;">a</th>
    <th style="width: 50%;">b</th>
  </tr>
  
  <tr>
    <td>a</td>
    <td>
      <svg height="1rem" width="100%">
        <rect x="0%" y="25%" width="100%" height="50%" fill="black"/>
      </svg>
    </td>
  </tr>
</table>

P.S.

修复它的一种可能的方法是初始时隐藏SVG线形图，让表格在没有 SVG 的情况下呈现。然后等待1毫秒左右，当表格被渲染时，使用JS测量表格宽度，并显式地设置该宽度。然后显示SVG线形图，表格将受到之前测量的显式宽度的限制。但也许有更简单的方法？

- Alex Craft

---

<th style="width=50%;"> should be <th style="width: 50%;"> - franklylately

Answer 1

这里有一个技巧可以禁用SVG对宽度的贡献。你只需要设置width:0，并添加min-width:100%以恢复完整的宽度：

在您的实际示例上应该有效（我已经测试过了）

table {
  table-layout: fixed;
  max-wdith: 100%
}

tr>* {
  border: 1px solid black;
}

svg {
  display: block;
  width:0;
  min-width:100%;
}

<table>
  <tr>
    <th style="width:50%;">aaa</th>
    <th style="width:50%;">bbb</th>
  </tr>

  <tr>
    <td>a</td>
    <td>
      <svg height="1rem" >
        <rect x="0%" y="25%" width="100%" height="50%" fill="black"/>
      </svg>
    </td>
  </tr>
</table>

<table>
  <tr>
    <th style="width:50%;">aaa</th>
    <th style="width:50%;">bbbbbbb</th>
  </tr>

  <tr>
    <td>a</td>
    <td>
      <svg height="1rem">
        <rect x="0%" y="25%" width="100%" height="50%" fill="black"/>
      </svg>
    </td>
  </tr>
</table>

相关链接：如何将文本宽度与动态调整大小的图像/标题宽度匹配？

- Temani Afif

Answer 2

我发现如果没有viewbox，svg会很麻烦 - 默认情况下，从内存中运行的svg高度/宽度为300x150，但这可能已经过时了。此外，我修正了您th样式中的一个拼写错误。

不幸的是，下面的代码创建了一个相对大小、按比例调整大小的svg。

table { table-layout: fixed; max-width: 100% }
tr > * { border: 1px solid black; }
svg { display: block; }

<table>
  <tr>
    <th style="width: 50%;">a</th>
    <th style="width: 50%;">b</th>
  </tr>
  
  <tr>
    <td>a</td>
    <td>
      <svg style="height: auto; width: 100%;" viewbox="0 0 100 10">
        <rect x="0%" y="25%" width="50%" height="50%" fill="black"/>
      </svg>
    </td>
  </tr>
</table>

- franklylately