为什么这3列没有填满父div？(使用display: table)

使用display: table属性可以将元素呈现为表格，其中包含表格行和表格单元格。当使用display: table属性时，子元素会自动布局在表格中，而不会填满父div。

这种情况可能是因为父div没有设置合适的高度或宽度，导致子元素无法填满整个父div。可以通过设置父div的高度或宽度来解决这个问题。

另外，还需要注意子元素的display属性。如果子元素的display属性为table-cell，则会自动填充父div。如果子元素的display属性为block，则不会填充父div。

以下是一个示例代码：

HTML代码：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

CSS代码：

.parent {
  display: table;
  width: 100%;
  height: 200px;
}

.child {
  display: table-cell;
  border: 1px solid black;
}

在上述代码中，父div设置了display: table属性，并且设置了固定的高度。子元素设置了display: table-cell属性，这样子元素会自动填充父div，并且可以根据需要设置边框等样式。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动应用托管）：https://cloud.tencent.com/product/maap
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 视频直播（CSS）：https://cloud.tencent.com/product/css
• 音视频处理（VOD）：https://cloud.tencent.com/product/vod
• 网络安全（SSL 证书）：https://cloud.tencent.com/product/ssl