테이블에 행을 추가하면 너비가 변경됩니까?

Question

행을 기존 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> 

이 표는 부트 스트랩 그리드 컬럼 내에 존재한다. 처음에는 표가 그리드 열 너비의 50 %를 채우고 JavaScript를 통해 행을 추가 한 후 표의 너비가 변경되고 그리드의 크기가 늘어나서 잘못된 디자인이됩니다.

Answer 1

는 테이블

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