如何在HTML表格中嵌入Div实现自定义布局，解决错误消息排版问题

我已经在Figma中完成了表格设计，现在需要用HTML实现它。要求错误消息能像设计图那样，跨列显示在对应行的单元格下方。

但我写的代码里，<div>直接消失了，错误消息被移到了表格上方。我也考虑过把错误消息做成单独一行，但这样在语义上不太准确，更重要的是会破坏我即将实现的「重排」功能——拖拽行的时候错误消息会错位。所以我希望尽可能把内容和错误消息放在同一行内。

CSS 代码 #

table {
  border-collapse: collapse;
}
td, th {
  border-bottom: 0.1rem solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

HTML 代码 #

<table>
    <tr>
        <th></th>
        <th>Option Identifier</th>
        <th>Swatch</th>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
</table>

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