HTML合并单元格、折叠边框

2024-05-19 00:37:44

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的基本方式：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

合并的顺序先上先左

例如：

使用上一篇博客的例子来展示：

   <table width="400" height="100" border="1"><tr><th>收入</th><th>支出</th><th>结余</th></tr><tr><th>1500</th><td>500</td><td>1000</td></tr><tr><th>3000</th><td>2500</td><td>500</td></tr></table>

原效果：

跨列合并：

  <table width="400" height="100" border="1"><tr><td>收入</td><td>支出</td><td>结余</td></tr><tr><td>1500</td><td colspan="2">500</td></tr><tr><td>3000</td><td>2500</td><td>500</td></tr></table>

使用了colspan跨列合并，故删除同列的一个单元格，另一个改为<td colspan="2">500</td>

效果如下：

跨行合并：

   <table width="400" height="100" border="1"><tr><td>收入</td><td>支出</td><td rowspan="3">未知</td></tr><tr><td>1500</td><td>500</td></tr><tr><td>3000</td><td>2500</td></tr></table>

使用了rowspan跨行合并，故删除同行的两个单元格，其中一个改为<td rowspan="3">未知</td>

效果如下：

折叠边框

上诉演示中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框 border-collapse：

border-collapse 属性设置是否将表格边框折叠为单一边框：

  <style>table {border-collapse: collapse;}table,th,td {border: 1px solid red;}</style>

border-collapse可选的三种属性值：

1. separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

2. collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

3. inherit 规定应该从父元素继承 border-collapse 属性的值。

HTML合并单元格、折叠边框相关推荐

word课程表设置符号与编号_用WORD设计一个课程表 ,标题使用艺术字生成 ,要包含合并单元格、边框、底纹、字体样式、背景图片,包含自己的学号和姓名。提交到锦城在线上。_学小易找答案...
[其它]课程论文要求: ( 1 )本课程的要点及重难点分析.( 200 字以上) ( 2 )对课程内容的小结和认识.( 300 字以上) ( 3 )对课程内容增.删或修改建议.(至少一条, 100 字 ...
poi 合并单元格添加边框_如何在Excel中的文本和单元格边框之间添加空间
poi 合并单元格添加边框 Adding a bit of extra padding to your cell boundaries can make it easier for you to re ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...
apache poi斜边框线_apache poi合并单元格设置边框
HSSFWorkbook wb = newHSSFWorkbook(); HSSFSheet sheet=wb.createSheet();//创建一个样式 HSSFCellStyle styleBo ...
apache poi合并单元格设置边框
HSSFWorkbook wb = new HSSFWorkbook();HSSFSheet sheet = wb.createSheet();//创建一个样式 HSSFCellStyle style ...
pythonxlwt行居中_python3-xlwt-Excel设置(字体大小、颜色、对齐方式、换行、合并单元格、边框、背景、下划线、斜体、加粗)...
# coding:utf-8 import patterns as patterns import xlwt import time i = 0 book = xlwt.Workbook(encodi ...
NPOI合并单元格后边框显示不正确？
方案一: 这个方法能解决:SetEnclosedBorderOfRegion() //merged cells on mutiple rows CellRangeAddress region = ne ...
Java POI导出Excel时，合并单元格没有边框的问题
今天用POI导出Excel的时候,发现导出的单元格确少边框,最后发现有2个方案可以解决. 方案一 CellRangeAddress的4个参数分别表示:起始行号,终止行号, 起始列号,终止列号 // 使 ...
HTML表格（合并单元格、边框、行高、间距等样式）
HTML实现表格的核心是table(表格).tr(行).td(单元格). 基础结构 <table><tr><td></td><td>< ...
前端vue导出 xlsx 实现带标题内容居中自动换行合并单元格加边框合计字体大小设置等
1.在src下的libs文件夹下新建一个excel文件夹,里面放入下载好的两个文件(Blob.js和Export2Excel2.js) 2.在所需要导出的vue文件里引入: import { toEx ...

最新文章

热门文章