如何更改 HTML table 中特定 <td> 元素的位置

Question

所以，我有这个 table，我需要在其中放置包含个人资料信息的 td，如下所示：

Example

这是我的 HTML:

<table>
        <tr>
           <td>
                <asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name"></asp:Label>
            </td>
            <td>
                <asp:Label ID="***" runat="server" Text="ID=****"></asp:Label>
            </td>

            <td colspan="4">
                <div id="cssProfile">
                    <asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile"></asp:Label>                         
                    <asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go"></asp:HyperLink>
                </div>
            </td>
         </tr>
     </table>

我尝试了 colspan 和 rowspan，但这不起作用，这是 CSS

#cssProfile{    
    display:flex;
    justify-content: start-flex;}

.lblProfile{    
margin-left: auto;}

.hlGoProfile{   
margin-left: auto;}

Answer 1

给你的 table 100% 宽度并添加 text-align: right 到有问题的单元格。

顺便说一句，如果您不需要它用于任何其他目的，您可以删除它 colspan。

table {
  width: 100%;
}
#cssProfile {
  border: 1px solid red;
  text-align: right;
}

<table>
  <tr>
    <td>
      <asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name">A</asp:Label>
    </td>
    <td>
      <asp:Label ID="***" runat="server" Text="ID=****">B</asp:Label>
    </td>

    <td colspan="4">
      <div id="cssProfile">
        <asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile">C</asp:Label>
        <asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go">D</asp:HyperLink>
      </div>
    </td>
  </tr>
</table>

如何更改 HTML table 中特定 <td> 元素的位置

How to change position of a specfic <td> element inside a HTML table

html

css

css-tables