Table ends panel-body early, causing format errors - asp.net

Question

I'm trying to fit a GridView (or a ListView, I've tried both) into the panel-body of a div panel. However, whenever the GridView appears, it closes out the panel-body early and causes formatting issues.
I've tried GridView, ListView, rearranging the elements of my panel, and I've trimmed a lot of stuff back to get it down to just the GridView.
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder" DataKeyNames="PkUser" OnItemCommand="lvOuter_ItemCommand" OnSorting="lvOuter_Sorting" OnSelectedIndexChanging="lvOuter_SelectedIndexChanging" OnPagePropertiesChanging="lvOuter_PagePropertiesChanging">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr id="placeHolder" runat="server" style="width: 100%"></tr>
</tbody>
<tfoot>
<tr style="align-content: center;">
<td class="listViewFooterText" style="color: white; text-align: center">
<uc:listviewpager runat="server" id="ucOuterListViewPager" listviewcontrolid="lvOuter" />
</td>
</tr>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span class="glyphicon glyphicon-user x1" style="text-align: left;" />
<b>
<asp:Label ID="lbEmployeeTitle" runat="server" Style="font-family: Arial; font-size: 14px;" Text='<%# Eval("EmployeeName") %>'></asp:Label></b>
<asp:Label ID="lbUnapprovedTitle" runat="server" CssClass="badge badge-blue" Text='<%# Eval("TotUnapproved") %>'></asp:Label>
</h3>
</div>
<div class="panel-body">
<asp:GridView ID="gvInner" runat="server" DataSource='<%# Eval("IndividualTracking") %>' AutoGenerateColumns="false" DataKeyNames="PkTrainingRequest" OnRowCommand="gvInner_RowCommand">
<Columns>
<asp:TemplateField ItemStyle-Width="40%" HeaderText="Title">
<ItemTemplate>
<asp:LinkButton ID="kbTitle" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%# Eval("Title") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="Length">
<ItemTemplate>
<asp:LinkButton ID="kbLength" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Length") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="30%" HeaderText="Date">
<ItemTemplate>
<asp:LinkButton ID="kbDate" runat="server" CssClass="gridViewRowText" CommandName="Populate" ToolTip="Go to Training Request" Text='<%#Eval("Date") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="10%" HeaderText="Approve">
<ItemTemplate>
<asp:Button ID="btnQuickApprove" runat="server" Text="Quick Approve" CssClass="btn btn-success" CommandName="Approve" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2">
<asp:Button ID="btnDrillDown" Text='<%#Eval("Subordinates") %>' CommandName="DrillDown" CssClass="btn btn-primary" runat="server" Visible='<%#Eval("VisibleSubordinates") %>' />
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<asp:Button ID="btnViewTraining" Text="View All Training" CommandName="ViewTraining" CssClass="btn btn-primary" runat="server" />
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
Expected result: panels, each with a header and footer, and a gridview (when it populates) in the body.
Actual result: the panels work fine until the gridview populates. When that happens, the panel-body ends before the gridview, and the panel-footer attaches to the top of the next panel.

Answer 1

You made a tr the placeHolder. So it generates this, which is incorrect html
<table style="border-collapse: collapse; width: 100%">
<tbody>
<div class="panel panel-default">
xxx
</div>
So if you want to use a correct table, make the LayoutTemplate like this
<asp:ListView ID="lvOuter" runat="server" ItemPlaceholderID="placeHolder">
<LayoutTemplate>
<table style="border-collapse: collapse; width: 100%">
<tbody>
<tr>
<td>
<span id="placeHolder" runat="server"></span>
</td>
</tr>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<div class="panel panel-default">
</div>
</ItemTemplate>
</asp:ListView>
Which generates
<table>
<tbody>
<tr>
<td>
<div class="panel panel-default">
</div>
<div class="panel panel-default">
</div>
</td>
</tr>
</tbody>
</table>
This still places everything in a single table cell. If you want a cell per ItemTemplate you need to put <tr><td> in it.