使用JS替换HTML后表格样式失效，内容外溢的原因及解决方法

问题原因 #

HTML表格有严格的结构规范：<table>的直接子元素只能是<thead>、<tbody>、<tfoot>或<tr>，<div>属于表格的非法子元素。浏览器解析时会自动把表格内的<div>移到表格外部，导致你动态生成的<tr>跟着脱离了表格结构，所以内容跑到表格外。而直接写<tr>时，浏览器会自动把它放到隐式的<tbody>里，因此显示正常。

解决方法 #

最规范的做法是把承载动态行的<div>换成表格合法的<tbody>标签：

修改后的HTML代码 #

<table class="items-container">
    <tr>
        <th>Item description</th>
        <th>Price(HK$)</th>
        <th>Quantity</th>
        <th>Total price(HK$)</th>
    </tr>
    <tbody id="cart-items">
        <!-- <tr>
            <td>
                <p>chocolate cookies</p>
                <p class="small-description-text">100g</p>
            </td>
            <td>$50</td>
            <td>1</td>
            <td>$50</td>
        </tr> -->
    </tbody>
</table>

JS代码无需修改 #

你的JS逻辑完全没问题，生成的<tr>会被正确插入到<tbody>中，符合表格结构规范后就能正常显示。

补充说明 #

如果不想改动现有HTML结构，也可以通过JS直接把生成的行插入到表格的正确位置（比如获取表格元素后追加到它的子元素里），但用<tbody>是最符合HTML标准的写法，后续维护性更好。

内容的提问来源于stack exchange，提问作者RamondC