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

Question

我在单元格表中有一个表。我希望桌子占据整个空间。看起来表格只占据单元格的中心。

   <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%;
}

Answer 2

删除正文边距和填充：

body {
  margin: 0;
  padding: 0;
}

并将您的表格包装在一个占据所有空间的 div 中：

div {
  position: absolute;
  width: 100%;
  height: 100%;
}