我正在构建应该以合理方式显示数据的表。如果不需要，请不要使用 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>
附言
修复它的一种可能方法是最初隐藏 SVG 线图，并让表格在没有 SVG 的情况下呈现。然后在 1 毫秒左右之后，当呈现表格时，测量表格宽度并使用 JS 显式设置该宽度。然后显示 SVG 行，表格将受到之前测量的显式宽度的限制。但也许有更简单的方法？
这里有一个技巧可以禁用 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>
相关:How to match width of text to width of dynamically sized image/title?
个人中心
文章发布
退出
4
我是一名优秀的程序员,十分优秀！