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

最新推荐文章于 2024-01-15 17:59:31 发布

凯小默

最新推荐文章于 2024-01-15 17:59:31 发布

阅读量6.9k

点赞数 1

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

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

版权

Html / CSS 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

写一个简单的表格

代码：

<!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>

效果：150px固定了

在这里插入图片描述

凯小默

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
table怎么实现部分列固定宽度，其它列宽自适应拉伸

写一个简单的表格代码：<!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{ widt
复制链接

扫一扫