table怎么实现部分列固定宽度，其它列宽自适应拉伸

最新推荐文章于 2024-01-29 02:26:40 发布

凯小默

最新推荐文章于 2024-01-29 02:26:40 发布

阅读量7.7k

点赞数 1

分类专栏： Html / CSS 文章标签： html css

本文链接：https://blog.csdn.net/kaimo313/article/details/107645773

版权

Html / CSS 专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建具有固定列宽的表格，通过table-layout属性和colgroup元素实现特定列的宽度固定，其余列自动拉伸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写一个简单的表格

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      width: 100%;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table border>
    <tr>
      <td>测试1</td>
      <td colspan="3">超长文本测试超长文本测试超长文本测试超长文本测试超长测试超长文本测试超长文本测试超长文本测试超长文本测试超长测试</td>
    </tr>
    <tr>
      <td>测试2</td>
      <td><input type="text"></td>
      <td>测试2-1</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td>测试3</td>
      <td colspan="3">超长文本测试666666666666666666666666666666666</td>
    </tr>
    <tr>
      <td>测试4</td>
      <td><input type="text"></td>
      <td>测试4-1</td>
      <td><input type="text"></td>
    </tr>
  </table>
</body>
</html>

效果：

在这里插入图片描述

想实现的效果

如下图，想要红框的宽度固定为某个宽度，比如150px，其它列可以拉伸

在这里插入图片描述

利用table-layout跟colgroup实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      width: 100%;
      border-collapse: collapse;
      /* 列宽由表格宽度和列宽度设定*/
      table-layout: fixed;
    }
    .title {
      background-color: #eee; 
    }
  </style>
</head>
<body>
  <table border>
    <colgroup>
      <col width="150">
      <col width="auto">
      <col width="150">
      <col width="auto">
    </colgroup>
    <tr>
      <td class="title">测试1</td>
      <td colspan="3">超长文本测试超长文本测试超长文本测试超长文本测试超长测试超长文本测试超长文本测试超长文本测试超长文本测试超长测试</td>
    </tr>
    <tr>
      <td class="title">测试2</td>
      <td><input type="text"></td>
      <td class="title">测试2-1</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td class="title">测试3</td>
      <td colspan="3">超长文本测试666666666666666666666666666666666</td>
    </tr>
    <tr>
      <td class="title">测试4</td>
      <td><input type="text"></td>
      <td class="title">测试4-1</td>
      <td><input type="text"></td>
    </tr>
  </table>
</body>
</html>