CSS 如何使 div 充满整个表格单元格

在本文中，我们将介绍如何使用 CSS 来使 div 元素完全填充整个表格单元格的方法。

阅读更多：CSS 教程

使用 CSS width 属性

CSS 中的 width 属性可以用来设置元素的宽度。要使 div 元素填充整个表格单元格，可以将其宽度设置为 100%。如下所示：

div {
  width: 100%;
}

在这个例子中，div 元素将会填充其父元素的宽度，即表格单元格的宽度。

使用 CSS height 属性

CSS 中的 height 属性可以用来设置元素的高度。要使 div 元素填充整个表格单元格，可以将其高度设置为 100%。如下所示：

div {
  height: 100%;
}

在这个例子中，div 元素将会填充其父元素的高度，即表格单元格的高度。

结合使用 width 和 height 属性

如果想要 div 元素同时填充整个表格单元格的宽度和高度，可以结合使用 width 和 height 属性。如下所示：

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

在这个例子中，div 元素将会同时填充其父元素的宽度和高度，即表格单元格的宽度和高度。

示例说明

下面是一个示例，演示如何将 div 元素填充整个表格单元格：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  height: 200px;
  border-collapse: collapse;
}

table td {
  border: 1px solid black;
  padding: 10px;
}

div {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

</body>
</html>

在这个示例中，使用了一个表格，其中的每个单元格都包含一个充满整个单元格的 div 元素。div 元素的背景色设置为浅蓝色，以便更好地展示其填充效果。