ASPX Gridview - Stretch Datacell over multiple rows - asp.net

Question

I have a gridview in my APSX that looks like below:
I want to be able to stretch the 'Comments' data cells so they stretch to the bottom of each section (stretch an extra 3 cells down)
I have tried numerous things and nothing seems to be working for me, I was wondering if anyone could point me in the right direction to do this.
This is the code I am using for my Gridview..
...
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Project Name">
<ItemTemplate>
<asp:Label ID="ProjectNameLab" runat="server" Text='<%# Bind("[Project Name]")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Customer Name" SortExpression="Customer Name">
<ItemTemplate>
<asp:Label ID="CustomerNameLab" runat="server" Text='<%# Bind("[Customer Name]")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="Month" SortExpression="Month">
<ItemTemplate>
<asp:Label ID="MonthLab" runat="server" Text='<%# Bind("Month")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%" HeaderText="App Date" SortExpression="ApplicationDate">
<ItemTemplate>
<asp:Label ID="ApplicationDateLab" runat="server" Text='<%# Bind("ApplicationDate")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="12%" HeaderText="Value" SortExpression="ThisApp">
<ItemTemplate>
<asp:LinkButton ID="ThisAppLab" runat="server" Text='<%# Bind("ThisApp")%>'></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
Enabled="True" PopupControlID="EditPopup1" TargetControlID="ThisAppLab"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Comments" SortExpression="Comments">
<ItemTemplate>
<asp:Label ID="CommentsLab" runat="server" Text='<%# Bind("Comments")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="true">
<ItemTemplate>
<tr>
<td colspan="5">
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="PaidLbl" runat="server" Text='<%# Bind("Paid")%>'></asp:Label>
<itemstyle width="100%" />
</td>
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="DifferenceLbl" runat="server"></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px" Width="100%" ID="DateFP" runat="server" Text='<%# Bind("Date")%>'></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
<tr>
<td colspan="5"></td>
<td>
<asp:Label Style="padding: 0px 0px 0px 0px; visibility: hidden" Width="100%" ID="BlankRowLbl" Text="Blank" runat="server"></asp:Label>
<itemstyle width="100%" />
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Any help or advice would be appreciated, Thank you in advance.

Answer 1

Within your template field you should add a table and set the row span to the amount of rows that you want. Something like :
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%" HeaderText="Comments" SortExpression="Comments">
<ItemTemplate>
<table>
<tr>
<td rowspan="3">
<asp:Label ID="CommentsLab" runat="server" Text='<%# Bind("Comments")%>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
EDIT: Try putting the cell in the other template field as another column instead of its own template field.