向表中添加行会改变宽度吗？

Question

当我向现有tr添加tbody行时，表格的宽度＆＃34;神奇地＆＃34;变化 - 为什么会这样/如何防止这种情况？

我的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 Grid列中（如果重要，则在流体容器内）。在开始时，表格填充了网格列宽度的50％，在通过JavaScript添加行后，表格的宽度发生变化甚至超出了网格，导致设计不良。

Answer 1

将此课程添加到您的表格

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