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
.my-table {
width: 100%;
}
.my-cell {
border:solid;
border-color:black;
background-color:#e0e0eb;
}
.my-cell__spanned {
padding: 10px;
background-color: #99ccff;
}
2. html
<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:
<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:
.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!