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

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

2 个答案: