Align 2 labels in column spanned table row

Question

0.00/5 (No votes)

See more:

I have a table with 6 columns, the bottom row spans all 6 columns and has a label in it aligned to the center. I need to add another label to this row and have it aligned to the left whilst maintaining the original label's center position. When I add the new label and float it to the left the original label is moved to the right. How can I align the new label to the left and still have the original label centered?

ASP.NET

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

What I have tried:

I have tried using display: grid but that doesn't produce the required result.

Posted 24-Jun-22 2:28am

MarcHeidemann

Updated 24-Jun-22 3:50am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Accepted Answer · 2022-06-24T03:50:00

Firstly, it is always a good idea to seperate style from markup by moving the styles into a seperate style.css file. Each element should usess class names. Below I have split the two.

1. styles

CSS

.my-table {
    width: 100%;
}

.my-cell {
    border:solid;
    border-color:black;
    background-color:#e0e0eb;
}

.my-cell__spanned {
    padding: 10px;
    background-color: #99ccff;
}

2. html

ASP.NET

<pre><table class="my-table">
    <tr>
        <td class="my-cell">
            <asp:Label ID="Label1" runat="server"
                       Font-Bold="false">aaa</asp:Label>
        </td>
        <td class="my-cell">
            <asp:Label ID="Label2" runat="server"
                       Font-Bold="false">aaaa</asp:Label>
        </td>
        <td class="my-cell">
            <asp:Label ID="Label3" runat="server"
                       Font-Bold="false">aaa</asp:Label>
        </td>
        <td class="my-cell">
            <asp:Label ID="label4" runat="server"
                       Font-Bold="false">aaa</asp:Label>
        </td>
        <td class="my-cell">
            <asp:Label ID="label5" runat="server"
                       Font-Bold="false">aaa</asp:Label>
        </td>
        <td class="my-cell">
            <asp:Label ID="Label6" runat="server"
                       Font-Bold="false">aaa</asp:Label>
        </td>
    </tr>
    <tr>
        <td colspan="6" class="my-cell my-cell__spanned">
                <asp:Label ID="NewLabel" runat="server"
                           Font-Bold="false"
                           class="my-label__left">bbb</asp:Label>
                <asp:Label ID="OriginalLabel" runat="server"
                           Font-Bold="false"
                           class="my-label__center">ccc</asp:Label>
        </td>
    </tr>
</table>

Readability improved. Now we can work on the solution.

You can't set a table cell (td element) to display: grid. So we wrap the two labels in a div element:

ASP.NET

<td colspan="6" class="my-cell my-cell__spanned">
    <div class="my-cell__layout">
        <asp:Label ID="NewLabel" runat="server" Font-Bold="false" class="my-label__left">bbb</asp:Label>
        <asp:Label ID="OriginalLabel" runat="server" Font-Bold="false" class="my-label__center">ccc</asp:Label>
    </div>
</td>

Now we can style the div element and layout the labels:

CSS

.my-cell__layout {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.my-label__left {
    grid-column-start: 1;
    grid-column-end: 3;
}

.my-label__center {
    grid-column-start: 3;
    grid-column-end: 5;
    justify-self: center;
}

Now you have control over positioning.

Enjoy!