Как изменить положение элемента specfi c <td>внутри таблицы HTML - PullRequest
Новая
       22

Как изменить положение элемента specfi c <td>внутри таблицы HTML

0 голосов
/ 13 февраля 2020

Итак, у меня есть эта таблица, в которой мне нужно поместить td, который содержит информацию о профиле, далее справа:

Пример

это мой 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;}

1 Ответ

0 голосов
/ 13 февраля 2020

Дайте вашей таблице 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>
...