如何用CSS和HTML实现三列表格布局，包含三列平分、特殊列宽等需求？-css教程-PHP中文网

如何用CSS和HTML实现三列表格布局，包含三列平分、特殊列宽等需求？

DDD

发布： 2025-02-20 11:14:43

原创

1113人浏览过

如何用css和html实现三列表格布局，包含三列平分、特殊列宽等需求？

CSS与HTML表格布局：灵活掌控列宽

本文演示如何使用CSS和HTML创建灵活的三列表格布局，满足不同列宽需求，例如三列均分、指定列宽以及剩余宽度自适应等。

实现方法：

我们无需使用colspan属性来合并单元格。通过CSS的width属性和百分比，可以更灵活地控制列宽。

立即学习“前端免费学习笔记（深入）”；

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

以下代码展示了如何实现：

<code class="html"><table>
  <tr>
    <td>列 1</td>
    <td>列 2</td>
    <td>列 3</td>
  </tr>
</table></code>

登录后复制

<code class="css">table {
  width: 100%; /* 表格占据父容器的全部宽度 */
}

/* 三列均分 */
td {
  width: 33.33%; /* 每列宽度约为总宽度的三分之一 */
  text-align: center; /* 文字居中 */
  border: 1px solid #ccc; /* 添加边框，方便观察 */
}

/* 第二列占三分之二，第三列自适应剩余宽度 */
/*  以下代码块替代上面td样式，实现第二种布局 */
/*
td:nth-child(1) {
  width: 33.33%;
}
td:nth-child(2) {
  width: 66.66%;
}
td:nth-child(3) {
  width: auto; /* 自动适应剩余宽度 */
}
*/</code>

登录后复制

通过以上CSS代码，我们可以轻松实现两种布局：