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

阅读：评论：0

写一个简单的表格

代码：

<!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固定了

本文发布于:2024-02-01 00:21:18，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170671807932457.html

上一篇：2022实景三维新技术公开课第五期：实景三维模型数据质检晚19:30准时开播

下一篇：wamp64 本机安装另一个mysql后phpMyAdmin无法访问（mysqli::real

标签：宽度自适应 table

留言与评论（共有 0 条评论）