如何将 div 添加到 HTML 表格中以实现自定义布局

Question

我已经在Figma中设计了这个表格，现在我需要用HTML构建它。但是，我不确定如何让错误消息跨越单元格下方的表格行，如图所示。

当我尝试在下面的代码中执行此操作时，div 就消失了，并且错误消息被传送到表格上方...

我还考虑过将错误消息添加为自己的行，但是，这在语义上并不完全准确。更重要的是，它会破坏我也将要实现的“重新排列”功能。如果我将一行拖到其他地方，错误消息最终会错位。因此，如果可能的话，我更愿意将其全部保留在一排。

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

<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>

Answer 1

混合 div 和 td 时，您始终必须遵循

table

、

tr

和

td

层次结构。 div 只能放置在

td

内部，反之则不然。

一个简单的解决方案是创建另一个表行。您可以只为 tr 标签赋予类或其他属性。当然，默认隐藏错误消息。

如果内容跨越整行，请在 td 中添加“rowspan”以使其跨越一行的多个或所有 td。

如果您仍然必须使用 div，则仅在

td

标签内使用 div。否则，您必须使用不同的布局选项。

请查看 MDN：HTML 表文档以获取更多信息。

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

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