Почему использование SVG в ячейке приводит к 100% ширине таблицы?

Автор вопроса: Alexandr_TT

Я создаю таблицу, которая должна отображать данные приемлимым образом. И не занимать ширину 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>

<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>

P.S.

Один из возможных способов исправить это - сначала скрыть линейные графики SVG и позволить визуализировать таблицу без SVG. А затем через 1 мс или около того, когда таблица будет отрисована, измерить ширину таблицы и явно установить ее с помощью JS. Затем отобразите строки SVG, и таблица будет ограничена явной шириной, измеренной ранее.
Но, может быть, есть способ попроще?

_{Свободный перевод вопроса Why using SVG in cell forces table to 100% width? от участника @Alex Craft.}

Источник

Ответы (1 шт):

Автор решения: Alexandr_TT

Вот способ, чтобы отключить влияние 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?

_{Свободный перевод ответа от участника @Temani Afif.}

→ Ссылка

licensed under cc by-sa 3.0 with attribution.