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

本文主要是介绍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{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>