Question

I have a table inside a cell table. I want the table to occupy the whole space. It looks like the table is only occupying the center of the cell.

   <asp:ListView ID="EmployeeListView" runat="server">
      <LayoutTemplate>
           <table id="tblEmployee">
           </table>
      </LayoutTemplate>
    <ItemTemplate>
     <tr>
    <td>
    <table style = "width: 100%; border-collapse: collapse; padding: 0">
       <tr>
           <td class = "aprovGriditem">
               <asp:Label ID="Label1" runat="server" Text="3:15"></asp:Label>
           </td>
       </tr>
       <tr>
           <td class = "aprovGridalt">
               <asp:Label ID="Label2" runat="server" Text="0:45"></asp:Label>
           </td>
       </tr>
    </table>
</td>
</tr>
</ItemTemplate>
</asp:ListView>

I want both cells of the inner table to occupy evenly the whole space of the outer cell, instead of concentring on the middle and leaving space around them.

#tblEmployee
{
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}
#tblEmployee th
{
 background-color: #BBC6E3;
 height: 25px;    
 }
 .aprovGriditem 
 {    
  border: 2px solid #BBC6E3;
  padding: 0;
  width: 100%;
  }
.aprovGridalt 
{
  background-color: #BBC6E3; 
  border: 2px solid #BBC6E3;
  padding: 0;
 width: 100%;
}

Answer 1

Style your table with the following:

height: 100%; width: 100%;

To add those styles to your table, you can either use inline styles:

<table style = "height: 100%; width: 100%;">

Or give it a class (more preferable since you might want to use the same styling combination later):

<table class = "bigtable">

Then add this to your stylesheet:

.bigtable {
    height: 100%;
    width: 100%;
}