如何用HTML表格和CSS实现三列布局，其中一列占三分之二宽度，另一列占剩余空间？-html教程-PHP中文网

如何用HTML表格和CSS实现三列布局，其中一列占三分之二宽度，另一列占剩余空间？

DDD

发布： 2025-02-21 15:44:01

原创

593人浏览过

如何用HTML表格和CSS实现三列布局，其中一列占三分之二宽度，另一列占剩余空间？

html表格与css：构建灵活的三列布局

本文介绍如何利用HTML表格和CSS样式，创建一种灵活的三列布局，其中一列占据总宽度的三分之二，另一列则占据剩余空间。

需求分析：

目标是创建一个三列布局，第二列占据总宽度的2/3，第三列占据剩余的1/3。

实现方案：

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

序列猴子开放平台

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

查看详情

我们采用HTML表格结构，并结合CSS样式来控制列宽。以下代码展示了具体的实现方法：

<code class="html"><table>
  <tr>
    <td colspan="2">第一列和第二列合并</td>
    <td>第三列</td>
  </tr>
</table></code>

登录后复制

<code class="css">table {
  width: 100%;
  border-collapse: collapse; /* 去除单元格间距 */
}

td {
  border: 1px solid black;
  box-sizing: border-box; /* 包含内边距和边框在元素宽度内 */
}

td:first-child {
  width: 33.33%; /* 第一列宽度 */
}

td:nth-child(2) {
  width: 66.67%; /* 第二列宽度 */
}

td:last-child {
  width: auto; /* 第三列自动适应剩余空间 */
}</code>

登录后复制

代码解释：

table { width: 100%; }：设置表格占据父容器的全部宽度。
border-collapse: collapse;：消除单元格之间的间隙，使布局更紧凑。
box-sizing: border-box;：确保单元格的宽度包含边框和内边距，避免因边框导致宽度溢出。
td:first-child { width: 33.33%; }：设置第一列宽度为总宽度的三分之一。
td:nth-child(2) { width: 66.67%; }：设置第二列宽度为总宽度的三分之二。
td:last-child { width: auto; }：设置第三列宽度为自动适应剩余空间。使用auto可以让浏览器自动计算第三列的宽度，确保三列总宽度为100%。