在跨列的表行中对齐两个标签

Question

我有一个6列的表，底部行横跨所有6列，并在其中有一个标签对齐到中心。我需要向这一行添加另一个标签，并使其向左对齐，同时保持原始标签的中心位置。当我添加新标签并将其浮动到左侧时，原始标签将移动到右侧。如何将新标签向左对齐，同时保持原有标签居中?

<table>
<tr>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="Label1" runat="server" Font-Bold="false"></asp:Label>
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="Label2" runat="server" Font-Bold="false"></asp:Label>
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="Label3" runat="server" Font-Bold="false"></asp:Label>
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="label4" runat="server" Font-Bold="false"></asp:Label>
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="label5" runat="server" Font-Bold="false"></asp:Label>
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
<asp:Label ID="Label6" runat="server" Font-Bold="false"></asp:Label>
</td>
</tr>
<tr>
<td colspan="6" style="border:solid; border-color:black; padding:10px; background-color:#99ccff;">
<asp:Label ID="NewLabel" runat="server" Font-Bold="false" Style="float:left;"></asp:Label>
<asp:Label ID="OriginalLabel" runat="server" Font-Bold="false"></asp:Label>
</td>
</tr>
</table>

Answer 1

UPDATE:这里最初的想法是在最后一行(6列)单元格中引入网格。虽然这可以单独工作，但当单元格从上面的表的其余部分获取其宽度时，它不会。

因此，此代码片段恢复到使用更简单的布局-将左侧文本设置为绝对位置，因此它不会干扰第二个文本的居中计算。

<table>
<tr>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 1
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 2
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 3
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 4
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 5
</td>
<td style="border:solid; border-color:black; background-color:#e0e0eb;">
Cell 6
</td>
</tr>
<tr>
<td colspan="6" style="border:solid; border-color:black; padding:10px; background-color:#99ccff; position: relative;">
<div style="position: absolute;">left label</div>
<div style="text-align: center;">center label</div>
</td>
</tr>
</table>
</body>