css - 如何使内表的单元格占据外表单元格的整个空间

Question

我在单元格表中有一个表。我想让 table 占据整个空间。看起来表格只占据了单元格的中心。

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

我希望内表的两个单元格均匀占据外层单元格的整个空间，而不是集中在中间并在它们周围留出空间。

#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

设置您的 table 样式具有以下内容:

height: 100%; width: 100%;

将这些样式添加到您的 table ，您可以使用内联样式:

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

或者给它一个类(更可取，因为你以后可能想使用相同的样式组合):

<table class = "bigtable">

然后将其添加到您的样式表中:

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