Добавление строк в таблицу изменяет ширину?

Question

Когда я добавляю tr строк к существующему tbody, меняется ширина таблицы «магически» - почему это так/как предотвратить это?

Мой HTML:

<table class="table table-hover table-sm" style="width: 50%"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Info</th> 
     </tr> 
    </thead> 
    <tbody id="list"> 
    </tbody> 
</table> 

Эта таблица находится в столбце Bootstrap сетки (в пределах контейнера для жидкости, если это имеет значение). Вначале таблица заполняет 50% ширины столбца сетки, после добавления строк через JavaScript изменения ширины таблицы и даже перерастают сетку, что приводит к плохому дизайну.

Answer 1

Добавить этот класс в таблице

.is-breakable { 
    word-break: break-word; 
}