当前位置： 首页 > article >正文

CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题

article 2026/1/28 3:43:10

概要

在前端开发中，表格常用于展示结构化数据。当数据组的字段数量不统一时（如有的行包含 3 组数据，有的行包含 2 组或 1 组），传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法，实现灵活适应不同数据组数的表格布局，确保视觉一致性和结构完整性。

解决方案

通过 HTML 表格的 colspan（跨列）属性动态调整列数，结合 CSS 的 border-collapse 合并边框，实现灵活且规范的表格布局

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>动态列数表格</title><style>table {width: 1000px;margin: 40px auto;border-collapse: collapse;border: 1px solid #ccc;font-family: Arial, sans-serif;}th,td {border: 1px solid #d9d9d9;padding: 10px;}th {background-color: #f3f3f3;text-align: right;font-weight: bold;width: 120px;}td {word-wrap: break-word;word-break: break-all;}</style></head><body><table><tr><th>UserName：</th><td>Zhou Maomao</td><th>Telephone：</th><td>1810000000</td><th>Live：</th><td>Hangzhou, Zhejiang</td></tr><tr><th>Remark：</th><td>empty</td><th>Status：</th><td colspan="4">Running</td></tr><tr><th>Address：</th><td colspan="5">No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</td></tr></table></body>
</html>

效果演示

在这里插入图片描述

相关文章：

CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题

概要 在前端开发中&#xff0c;表格常用于展示结构化数据。当数据组的字段数量不统一时&#xff08;如有的行包含 3 组数据&#xff0c;有的行包含 2 组或 1 组&#xff09;&#xff0c;传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法&#x…...

编程日记 2026/1/26 17:53:52

加载js/mjs模块时服务器返回的 MIME 类型不对导致模块被拒绝执行

浏览器报错 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.Understand this errorAI 核心问题 浏览器加载模块脚本&#xff08;如…...

编程日记 2025/12/23 12:33:51

大唐杯省赛安排来了！还有7天，该如何准备？

(一&#xff09;赛道一:工程实践赛 1、理论赛阶段由参赛队伍使用两台电脑分别登录学唐平台作答&#xff0c;仿真实践赛阶段为参赛队伍共用一台电脑&#xff0c;以竞赛小组方式共同作答&#xff08;按照报名顺序&#xff0c;用第1选手账号登录仿真平台&#xff09;。最终统计理…...

编程日记 2026/1/26 17:54:37

iframe学习与应用场景指南

一、iframe核心原理与学习路径 1. 嵌套网站的本质原理 技术特性&#xff1a; • 浏览器为每个iframe创建独立的window对象和DOM环境 • 资源独立加载&#xff1a;子页面拥有自己的CSS/JS/Cookie作用域 • 跨域限制&#xff1a;同源策略下无法直接访问DOM&#xff08;需CORS或…...

编程日记 2026/1/26 17:17:30

WebGL数学手记:矩阵基础

一、矩阵的定义 矩阵&#xff0c;数学术语。在数学中&#xff0c;矩阵&#xff08;Matrix&#xff09;是一个按照长方阵列排列的复数或实数集合。 1.英文发音&#xff08;Matrix&#xff09; Matrix的发音类似于中文的[美吹克斯]&#xff0c;知道它的发音。方便后期看教程时…...

编程日记 2026/1/26 22:45:03

IO流——字符输入输出流：FileReader FileWriter

一、文件字符输入流&#xff1a;FileReader 作用&#xff1a;以内存为基准&#xff0c;可以把文件中的数据以字符的形式读入到内存中去 public class Test5 {public static void main(String[] args) {try (Reader fr new FileReader("E:\\IDEA\\JavaCodeAll\\file-io-t…...

编程日记 2026/1/26 17:46:53

Graphpad Prism for Mac医学绘图

Graphpad Prism for Mac医学绘图 一、介绍 GraphPad Prism for Mac是一款功能强大、易于使用的科学和统计分析软件&#xff0c;适用于各种类型的数据处理和可视化需求。无论您是进行基础研究、临床试验还是学术写作&#xff0c;GraphPad Prism for Mac都能为您短时间内做出最…...

编程日记 2026/1/26 22:18:35

使用人工智能大模型腾讯元宝，如何免费快速做高质量的新闻稿？

今天我们学习使用人工智能大模型腾讯元宝&#xff0c;如何免费快速做高质量的新闻稿&#xff1f; 手把手学习视频地址&#xff1a;https://edu.csdn.net/learn/40402/666431 第一步在腾讯元宝对话框中输入如何协助老师做新闻稿&#xff0c;通过提问&#xff0c;我们了解了老师…...

编程日记 2026/1/26 17:23:44

破解root密码

一、背景&#xff1a; 必须是服务器的管理者&#xff0c;涉及重启服务器 二、破解过程&#xff1a; 1)重启系统,进入 救援模式 开机过程中&#xff0c;按e进入救援模式 在linux开头的该行&#xff0c;将此行的ro修改为rw 然后空格输入 rd.break 按 ctrl x 启动&#xff0c;…...

编程日记 2026/1/26 22:00:11

嵌入式---烧录器

一、核心定义与本质功能 烧录器&#xff08;Programmer&#xff09;是一种将用户编写的程序代码&#xff08;如.hex/.bin文件&#xff09;写入单片机内部存储器&#xff08;Flash/EEPROM/ROM&#xff09;的专用工具&#xff0c;核心功能包括&#xff1a; 程序烧写&#xff1a…...

编程日记 2026/1/28 1:26:18

机器学习 | 强化学习基本原理 | MDP | TD | PG | TRPO

文章目录 📚什么是强化学习🐇监督学习 vs 强化学习🐇马尔科夫决策过程（MDP）📚基本算法（value-based & policy-based）🐇时序差分算法（TD）🐇SARSA和Q-learning🐇策略梯度算法（PG）🐇REINFORCE和Actor-Critic🐇信任区域策略优化算法（TRPO）⭐️参考…...

编程日记 2025/11/26 13:16:09

Spring中使用Kafka的详细配置，以及如何集成 KRaft 模式的 Kafka

在 Spring 中使用 Apache Kafka 的配置主要涉及 Spring Boot Starter for Kafka&#xff0c;而开启 ‌KRaft 模式‌&#xff08;Kafka 的元数据管理新模式&#xff0c;替代 ZooKeeper&#xff09;需要特定的 Kafka Broker 配置。以下是详细步骤&#xff1a; 一、Spring 中集成 …...

编程日记 2025/9/9 19:50:35

llinux上的pip国内镜像全局配置

1、创建全局 pip 配置文件&#xff08;推荐&#xff09; sudo tee /etc/pip.conf <<EOF [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple trusted-host pypi.tuna.tsinghua.edu.cn EOF2、验证配置 任意用户运行以下命令应显示配置的镜像&#xff1a; …...

编程日记 2025/12/23 14:51:57

ASEG的鉴定

等位基因特异性表达（Allele-Specific Expression, ASE）基因的鉴定是研究杂种优势和基因表达调控的重要手段。以下是鉴定ASE基因的详细流程和方法： ### **1. 实验设计与样本准备** - **选择材料**：选择杂交种及其亲本作为研究材料。例如，玉米中的B73和Mo17及其杂交组合B73…...

编程日记 2025/11/13 20:59:26

swift菜鸟教程14（闭包)

一个朴实无华的目录 今日学习内容&#xff1a;1.Swift 闭包1.1闭包定义1.2闭包实例1.3闭包表达式1.3.1sorted 方法&#xff1a;据您提供的用于排序的闭包函数将已知类型数组中的值进行排序。1.3.2参数名称缩写&#xff1a;直接通过$0,$1,$2来顺序调用闭包的参数。1.3.3运算符函…...

编程日记 2026/1/26 19:54:10

新手宝塔部署thinkphp一步到位

目录 一、下载对应配置 二、加载数据库 三、添加FTP​ 四、上传项目到宝塔​ 五、添加站点​ 六、配置伪静态 七、其他配置 开启监控 八、常见错误 一、打开宝塔页面&#xff0c;下载对应配置。 二、加载数据库 从本地导入数据库文件 三、添加FTP 四、上传项目到宝塔…...

编程日记 2026/1/26 21:27:10

Java常用工具算法-7--秘钥托管云服务2（阿里云 KMS）

阿里云的KMS&#xff08;Key Management Service&#xff09;也是一种托管式密钥管理服务&#xff0c;帮助用户安全地创建、控制和使用密钥&#xff0c;保护敏感数据。通过使用KSM&#xff0c;您可以专注于构建和优化应用程序&#xff0c;而不必担心密钥管理的复杂性。 1、主要…...

编程日记 2025/9/10 21:21:38

基于STM32 的实时FFT处理（Matlab+MDK5）

目录 一、 任务介绍二、基本原理三、软件仿真3.1 软件仿真基本原理3.2 软件仿真序列的软件模拟 四、模拟测试五、 附加题六、 源码 一、 任务介绍 1、在硬件平台上实现 FFT 算法&#xff1b; 2、模拟数据&#xff0c;通过 FFT 算法进行谱分析&#xff1b; 3、测定 PWM 输出方波…...

编程日记 2026/1/26 22:22:50

RVOS-3.实现内存管理

3.内存管理 3.1 实验目的 对内存进一步的管理&#xff0c;实现动态的分配和释放。 实现 Page 级别的内存分配和释放。 在 page 分配的基础上实现更细颗粒度的&#xff0c;精确到字节为单位的内存管理。 &#xff08;练习8.1&#xff09; void *malloc(size_t size); void fr…...

编程日记 2026/1/26 3:41:07

MySQL 约束（入门版）

目录 一、约束的基本概念 二、约束演示 三、外键约束 &#xff08;一&#xff09;介绍 &#xff08;二&#xff09;外键约束语法 &#xff08;三&#xff09;删除/更新行为 一、约束的基本概念 1、概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储…...

编程日记 2026/1/26 18:06:33

系统与网络安全------Windows系统安全（11）

资料整理于网络资料、书本资料、AI&#xff0c;仅供个人学习参考。 制作U启动盘 U启动程序 下载制作U启程序 Ventoy是一个制作可启动U盘的开源工具&#xff0c;只需要把ISO等类型的文件拷贝到U盘里面就可以启动了 同时支持x86LegacyBIOS、x86_64UEFI模式。 支持Windows、L…...

编程日记 2026/1/26 17:12:31

电容命名解析与多类型电容的必要性

一、电容命名&#xff1a;NP0、COG及其他类型 1. NP0与COG的命名与识别 COG&#xff08;EIA标准&#xff09;&#xff1a; 命名规则&#xff1a; C&#xff1a;温度系数 0 ppm/℃&#xff08;Class I介质&#xff09; O&#xff1a;容值偏差 30 ppm/℃ G&#xff1a;温度范围…...

编程日记 2026/1/9 21:59:45

重返JAVA之路-初识JAVA

目录 1.什么是JDK? 2.什么是JRE? 3.什么是JVM? 4.JDK&#xff0c;JRE&#xff0c;JAM之间的关系是怎么样的&#xff1f; 5.什么是驼峰命名法&#xff1f; 1.什么是JDK? JDK&#xff08;Java Development Kit&#xff09;&#xff1a;Java 开发工具包&#xff0c;是 Jav…...

编程日记 2026/1/27 4:10:29

封装公共方法，并存在异步请求接口情况 封装及调用

**封装公共方法&#xff0c;并存在异步请求接口情况 ** utilsTwo/login.js文件夹下 封装代码如下&#xff1a; // 扫一扫加入班组 export async function sweep(parameter) {// console.log("登录信息", userInfo)return await new Promise(function(resolve, reje…...

编程日记 2026/1/19 16:57:36

蓝桥杯 小蓝的操作（一维差分）

问题描述 一个数组 aa 中共包含 nn 个数&#xff0c;问最少多少次操作&#xff0c;可以让 aa 数组所有数都变成 11 。 操作的内容是&#xff1a;每次操作可以任选一个区间使得区间内的所有数字减 11 。 数据保证一定有解。 输入格式 第一行一个整数 nn 表示有 nn 个整数。 …...

编程日记 2026/1/26 22:00:50

训练数据清洗(文本/音频/视频)

多数据格式的清洗方法 以下是针对多数据格式清洗方法的系统性总结&#xff0c;结合Python代码示例&#xff1a; 一、数据清洗方法总览&#xff08;表格对比&#xff09; 数据类型核心挑战关键步骤常用Python工具文本非结构化噪声去噪→分词→标准化→向量化NLTK, SpaCy, Jie…...

编程日记 2026/1/14 9:10:55

LIB-ZC, 一个跨平台(Linux)平台通用C/C++扩展库, 字符集转码/字符集探测

LIB-ZC, 一个跨平台(Linux)平台通用C/C扩展库, 字符集转码/字符集探测 字符集DNS/IP相关的方法: 主要是为了解决跨平台的问题其次对一些常见操作做了封装命名空间: zcc::charset 常用变量 const char *chinese[] {"UTF-8", "GB18030", "BIG5&quo…...

编程日记 2025/11/25 17:25:56

阿里云服务迁移实战: 02-服务器迁移

ECS 迁移 最简单的方式是 ECS 过户&#xff0c;不过这里有一些限制&#xff0c;如果原账号是个人账号&#xff0c;那么目标账号无限制。如果原账号是企业账号&#xff0c;则指定过户给相同实名认证的企业账号。 具体操作步骤可以参考官方文档 ECS过户 进行操作。 本文重点介绍…...

编程日记 2026/1/26 17:40:45

cat命令查看文件行数

在Linux和Unix-like操作系统中&#xff0c;cat命令主要用于查看文件内容&#xff0c;而不是直接用来查看文件行数。如果你想要查看一个文件的行数&#xff0c;可以使用以下几种方法&#xff1a; 方法1&#xff1a;使用wc命令 wc&#xff08;word count&#xff09;命令可以用…...

编程日记 2025/11/1 19:42:30

7# 5多线-7 不会停

7# 5多线-7 不会停 分析&#xff0c;明显线接错了&#xff0c;打自动时也能手动启停&#xff0c;打手动无法启停&#xff0c;这时远程只能启ka3,无法启ka4。排查手自转换2上没接线&#xff0c;接到8上了&#xff08;13和12接错了&#xff0c;也就是sac的5和6接错了&#xff09;…...

编程日记 2025/11/26 5:26:29