【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1、常用表格标签
普通
<table>
| <tr>
| | <th></th>
| | <td></td>
| </tr>
</table>
常用
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr :元素定义表格行,
th :元素定义表头,大多数浏览器会把表头显示为粗体居中的文本,
td: 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
caption:定义表格的标题。标签必须直接放置到 <table> 标签之后。只能对每个表格定义一个标题。
所有主流浏览器都支持 <caption> 标签。默认居中可通过 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。
colgroup:对表格中的列进行组合,可以向整个列应用样式。只能在 <table> 元素之内, <caption> 元素之后,任意元素之前使用 。
所有主流浏览器都支持 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签。
<colgroup span="2" style="background-color:red"> </colgroup> --两列变为红色
span 规定列组应该横跨的列数。
col: 标签为表格中一个或多个列定义属性值。<col> 没有结束标签。只能在 table 或 colgroup 元素中使用 <col> 标签。
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
thead:标签用于组合 HTML 表格的表头内容。作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 元素之后,<tbody>、 <tfoot> 和 <tr> 元素之前。
元素内部必须包含一个或者多个 <tr> 标签。
tbody:用来规定表格的主体内容
tfoot:用来规定表格的页脚部分
三者结合起来使用通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。
当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
2、属性
属性 | 值 | 描述 |
---|---|---|
align |
|
不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
bgcolor |
|
不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
border | pixels | 规定表格边框的宽度。 |
cellpadding |
|
规定单元边沿与其内容之间的空白。 |
cellspacing |
|
规定单元格之间的空白。 |
frame |
|
规定外侧边框的哪个部分是可见的。 |
rules |
|
规定内侧边框的哪个部分是可见的。 |
summary | text | 规定表格的摘要。 |
width |
|
规定表格的宽度。 |
3、边框
border属性 规定表格边框的宽度。
<table border="1"> </table> 边框为1px
border-collapse: 属性设置表格的边框是否被合并为一个单一的边框
如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
inherit | 规定应该从父元素继承 border-collapse 属性的值 |
制作一个各边都为1px的边框
1. <table border="1"> </table> |
table{border-collapse:collapse} | -- --所有边框都为1px 的表格
2、 table 的CSS为 { border-collapse:collapse; border:none; }
td 的CSS为 { border:solid #000 1px; }
4、关于html中table表格tr,td的高度和宽度
1、table中的width和height设置及其作用:
table 中设置的 height 其实是设置一个最小值,
当表格中的内容或者行高总值超过这个设置值时,会自动延长表格的height值,
当表格中的内容或者行高没有达到这个值时,会自动扩大到这个值。
table 中设置的 width 值一般为表格宽度的最大值,不能改变,即使内部的内容宽度超过也不能改变。
(这个内部内容如果是图片的话是可以改变表格宽度的。)
2、tr标签中width和height设置及其作用:
tr 标签里面的 width 设置不起任何作用。
tr 中的 height 设置和几个tr之间的设置有关。
当几个 tr 都设置了 height 的具体数值时,各个 t r的 height 按照设置的值的比例来分配总的height值,
当几个 tr 都没有设置 height 具体值时,平均分配总的height值。
当 tr 设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满足设置了具体值的tr,之后再全部给没有设置具体值的tr。
宽度不够 tr 总的设置值的情况,要满足tr的基本需要,这里会自动延长表格的height的。然后再考虑设置了height的tr,最后考虑没有设置height的tr。
3、td标签中width和height设置及其作用:
td 的 width 是和所处的一列每个 td 的 width 都相关的,取其中最大的 width 作为这一列中每个 td 的 width,
各个 td 之间的宽度分配按照第二条中各 tr 的 height 分配规律,
各td的width不是平均分配,而是根据各自的实际内容按比例分配。
td 的 height要 看这个td所在的行的最大高度来确定这一行的每个td的height,然后各个行的高度情况和tr中的height分配原则是一样的。
4、td的height和tr的height之间的关系。
首先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设置的值大就按照哪个,
如果一个设置了值一个没有设置值,那么按照设置值的算。
5、表格内容自动换行
一 汉字换行
table-layout:fixed //固定表格大小(不会被撑大)
word-break:break-all; //字符串自动换行
table-layout
所有主流浏览器都支持table-layout属性。
值 | 描述 |
---|---|
automatic | 默认。列宽度由单元格内容设定。 |
fixed |
表的宽度和列的宽度固定,不随单元格中内容而改变 一. 设置了各个列的宽,没有设表的宽:表的宽度等于各个列的宽度的和 二. 设置了表的宽度,没有设各个列的宽度:各个列的宽度平均分配 三. 要是都没设置宽度:表的宽度为100%,各个列的宽度平均分配 |
inherit | 规定应该从父元素继承 table-layout 属性的值 |
注意: IE7和更早的版本不支持"inherit"的值。IE8需要定义!DOCTYPE。IE9支持"inherit"。
要想固定table的总的宽度和每列的宽度:
<table id="Table1" style="table-layout:fixed" border="1" >
word-break
指定非CJK脚本的断行规则 (CJK脚本是中国,日本和韩国("中日韩")脚本)。
值 | 描述 |
---|---|
normal | 使用浏览器默认的换行规则。允许在词间换行 |
break-all |
允许在单词内换行。不管在什么位置,超过列宽时就回行 允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 |
keep-all |
只能在半角空格或连字符处换行。 不允许 Chinese, Japanese, 和 Korean 回行 |
注意:
1、(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
2、(Firefox浏览器)不能解决连续的英文字符和阿拉伯数字的断行, ,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,
使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">
abcdefghigklmnopqrstuvwxyz1234567890
</td>
</tr>
</table>
二、英文强行截断换行
可以利用css中的word-break 风格来达到我们的目的:
1、设置table中的单元格内容自动换行,为了满足浏览器兼容性,需要在table中设置table-layout:fixed。
2、word-wrap在div属性中能起到换行的作用,也可以在td中使用div,在div里面设置。
<style type="text/css">
table{border:1px red solid;height:300px; border-collapse: collapse;}
table tr td{border:1px red solid;}
</style>
<table width="600px" style="table-layout:fixed;word-wrap:break-word;" >
<tr style="">
<td style="width:120px;">全是中文有标点</td>
<td style="width:120px;">全是中文无标点</td>
<td style="width:120px;">全是英文有标点</td>
<td style="width:120px;">中文和英文</td>
<td style="width:120px;">全是英文无标点</td>
</tr>
<tr >
<td style="width:120px;">你好这是中文。你好这是中文。你好这是中文。你好这是中文。</td>
<td style="width:120px;">你好这是中文你好这是中文你好这是中文你好这是中文</td>
<td style="width:120px;">This is all English. This is all English. This is all English.</td>
<td style="width:120px;">中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.</td>
<td style="width:120px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
<br>
<div style="word-wrap:break-word;width:200px;border:1px red solid;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<br>
<div style="word-wrap:break-word;width:200px;border:1px #00FF33 solid;">中文中文中文中文中文中文中文中文中文中文中文</div
6、合并单元格
colspan 单元格横向跨越
rowspan 单元格纵向跨越
<td rowspan="3"> -- 纵向合并(跨越) 3 个 单元格
<td colspan="2" > -- 横行合并(跨越)2 个单元格
当 表格设置了 style ="table-layout:fixed" 后,如果在第一行合并了单元格,则下面的单元格的宽度就会无法设置。
原因:table-layout: fixed 的表格,各列宽度由第一行决定,后面指定的宽度会被忽略。你第一行合并了,所以各列宽度均分了。
解决方法一:
在tbody前加
<col style="width: 20%" />
<col style="width: 20%" />
.........................
解决方法二:
设置一个隐藏的行来规定宽度:
<tr style="display:none">
<td style="width:100px"></td>
<td style="width:80px"></td>
<td style="width:20px"></td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
这个方法,在IE6,IE7,IE8中都可以正确地显示,但在非IE中,是没起作用的。下面给出另外一种方法:
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1">
<tr style="height:0;">
<th style="width:100px"></th>
<th style="width:80px"></th>
<th style="width:20px"></th>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1.1</td>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
7、打印表格每页都有的表头和打印分页
当页面太长,打印的时候,要求每页上都要有表头,结尾,
表头: 定义其thead,并对其样式设置成:style="display:table-header-group"。
结尾:定义其tfoot,并对style="display:table-footer-group"
<TABLE border="0" style="font-size:9pt;" width="300px" align="center">
<THEAD style="display:table-header-group;font-weight:bold">
<TR>
<TD >每页都有的表头 </TD>
</TR>
</THEAD>
<TBODY style="text-align:center"">
<TR>
<TD>表格内容</TD>
</TR>
</TBODY>
<TFOOT style="display:table-footer-group;font-weight:bold">
<TR>
<TD >每页都有的表尾</TD>
</TR>
</TFOOT>
</TABLE>
<input type=button value=" 打 印 " onclick=JavaScript:window.print()>
8、表格嵌套
<td style="padding:0px;height:31px;">
<table border="1" frame="void">
<tr>
<td><span>生产人员工资</span></td>
</tr>
</table>
</td>
frame="void" -- 表格边框重合 ( 在边框用 border="1" 表示的情况下 )
给外侧 <td> 一个基础高度,<table> 中的高 宽都是 100%。 --边框线沾满单元格不会出现空白
属性 cellspacing 在这里不好用 ,可以设置外侧 <td> 的 样式 padding=0 去除边框线之间的空间
【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行的更多相关文章
- .Net用字符串拼接实现表格数据相同时合并单元格
前言 最近在做项目通过GridView或Repeater绑定数据,如果两行或若干行某列值相同,需要进行合并单元格,但是实现过程中想到了字符串拼接,于是就没用绑定数据控件,而是用了html结合字符串实现 ...
- Windows Forms DataGridView中合并单元格
Windows Forms DataGridView 没有提供合并单元格的功能,要实现合并单元格的功能就要在CellPainting事件中使用Graphics.DrawLine和 Graphics.D ...
- GridView中合并单元格
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...
- DataGridView合并单元格(一列或一行)
#region"合并单元格的测试(一列或一行)" // int?是搜索一种类型(可空类型),普通的int不能为null,而用int?,其值可以为null //private int ...
- poi导出excel合并单元格(包括列合并、行合并)
1 工程所需jar包如下:commons-codec-1.5.jarcommons-logging-1.1.jarlog4j-1.2.13.jarjunit-3.8.1.jarpoi-3.9-2012 ...
- Java导出Excel表,POI 实现合并单元格以及列自适应宽度(转载)
POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...
- POI 实现合并单元格以及列自适应宽度
POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...
- C# DataGridView中合并单元格
/// 合并GridView列中相同的行 /// /// GridView对象 /// 需要合并的列 public static void GroupRows(GridView GridView1, ...
- tkinter的grid布局中合并单元格
rowspan 合并多行,比如:Label(root,text="table",width=10,height=2,),grid(row=0,column=0,rowspan=2 ...
随机推荐
- drf8 解析器
解析器的介绍 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己想要的数据类型的过程. 本质就是对请求体中的数据进行解析. Accept与ContentType请求头. Accept是告诉 ...
- Nginx unit 源码安装初体验
Nginx unit 源码安装初体验 上次介绍了从yum的安装方法(https://www.cnblogs.com/wang-li/p/9684040.html),这次将介绍源码安装,目前最新版为1. ...
- Learning Rust - Syntax
Rust is another compiling language that may replace the position of C/C++ in server filed. It runs f ...
- Cura - CuraEngine - 架构分析
参考: https://blog.csdn.net/justdoithai/article/details/52746094
- js- DOM事件之按钮绑定函数注意事项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Lerning Entity Framework 6 ------ Joins and Left outer Joins
Joins allow developers to combine data from multiple tables into a sigle query. Let's have a look at ...
- PICE(6):集群环境里多异类端点gRPC Streaming - Heterogeneous multi-endpoints gRPC streaming
gRPC Streaming的操作对象由服务端和客户端组成.在一个包含了多个不同服务的集群环境中可能需要从一个服务里调用另一个服务端提供的服务.这时调用服务端又成为了提供服务端的客户端了(服务消费端) ...
- 微信小程序如何调用API实现数据请求-wx.request()
前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...
- java web 乱码终结
配置 tomcat 打开 tomcat 安装路径下的 conf/server.xml 文件,将 port 为 8080 的 connector 做如下更改: <Connector port=&q ...
- 使用NetTcpBinding,WCF服务未能被激活
我的WCF采用的是NetTcpBinding,使用时就会报错,换成BasicHttpBinding,就一切正常 The requested service, 'net.tcp://wcf.xxxxx. ...