HTML表格中各元素之间属性之间的相互影响
开发了一个动态表格制作程序,用的是谷歌浏览器。发现几个现象,记录如下:
1、按照技术文档的说法,正规的表格样式如下:
<table>
<caption>标题</caption>
<colgroup>
<col> //我在这里设置了各列的背景色彩、列宽
......
<col>
</colgroup>
<tfoot>。。。。。。</tfoot> //技术文档说,要放在这里。
<thead>
<tr> //设置表头
<th>表头1</th>
......
<th>表头n</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格1</td>
.......
<td>表格n</td>
</tr>
......
</tbody>
</table>
2、设计中发现,具备上述完整格式标签的结构,会出现有的属性失效。
(1)如果有<tbody></tbody>则里面的背景色、宽度均无效。但<thead></thead>里面的表头宽度不受影响。
(2)如果删除<tbody>和</tbody>,同时删除<thead>和</thead>,则<col>标签设置的背景色和宽度均有效,查看开发者工具,发现谷歌浏览器已经自动添加了<tbody></tbody>。
(3) 如果删除<colgroup></colgroup>则浏览器会自动添加。同时<col>标签设置的属性有效。
(4)谷歌浏览器不自动添加<thead></thead>标签。
(5)谷歌浏览器自动将<tfoot></tfoot>移动到最后。
3、上述现象没有在其他浏览器上观察过,发现同类问题的朋友可以在下面留言交流。
HTML表格中各元素之间属性之间的相互影响的更多相关文章
- oracle数据库查询日期sql语句(范例)、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据(一整列)
先列上我的数据库表格: c_date(Date格式) date_type(String格式) 2011-01-01 0 2012-03-07 ...
- JQuery中操作元素的属性_对象属性
我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...
- HTML中body元素的属性
body元素的属性 属性 描述 text 设定页面文字颜色 bgcolor 设定页面背景颜色 background 设定页面背景图像 bgproperties 设定页面的背景图像为固定状态(不随页面的 ...
- dom4j修改,获取,增加xml中某个元素的属性值
XML文件: <?xml version="1.0" encoding="UTF-8"?> <vrvscript> <item I ...
- 将list中的元素按照属性分类成树状的map
技术交流群: 233513714 public LinkedHashMap<String, List<TPhoneModel>> queryPhoneList(List< ...
- js中,浏览器中不同元素位置属性解析
offset() 只对可见元素有效,获取匹配元素在当前视口的相对偏移,返回的对象有两个整型属性,top和left,像素计算: position() 相对父元素的偏移,position.left ...
- java8 list转map,list集合中的元素的属性转set,list集合中对象的属性转list
一.使用java8对list操作 1.1list转map private Map<String, Member> getMemberMap() { List<Member> m ...
- 去除sql表格中的unique 唯一属性----phpmyadmin 没发现哪里好直接操作
ALTER TABLE tf_giftcard_record DROP INDEX oid;
- JavaScript中如何让图形旋转不会相互影响
最近在联系JavaScript 二维绘图,经常会用到旋转,前几篇博文也提到过这类问题. 但是我忘记了JavaScript二维绘图中有关旋转最核心的两个方法:save()和restore() 在w3c上 ...
随机推荐
- python3openpyxl库的简单使用
python3操作表格有很多库,现在主要给大家介绍一下我比较喜欢用的openpyxl库,安装直接pip安装,对pip安装有疑问可以参考我有关于pip使用的文章. wb=Workbook()#新建表格 ...
- 为什么磁盘慢会导致Linux负载飙升?
一.CPU利用率和负载率的区别 这里要区别CPU负载和CPU利用率,它们是不同的两个概念,但它们的信息可以在同一个top命令中进行显示.CPU利用率显示的是程序在运行期间实时占用的CPU百分比,这是对 ...
- Excel的IYQ钓鱼
0x00 环境准备 1.操作系统:windows7 2.microsoft office版本:office 2010 0x01 了解IYQ的基本概念 可以将IYQ简单的理解成内置在excel中的一种特 ...
- 【工利其器】Android Lint篇——为Android量身定做的静态代码审查工具
前言 我们在进行代码优化的时候,往往是通过开发者的经验来判断哪些代码可能存在潜在问题,哪些资源的使用不合规范等.实际上Android SDK提供了一款功能非常强大的工具,来帮助开发者自动检测代码的质量 ...
- Elastic Stack 开源的大数据解决方案
目的 本文主要介绍的内容有以下三点: 一. Elastic Stack是什么以及组成部分 二. Elastic Stack前景以及业务应用 三. Elasticsearch原理(索引方向) 四. El ...
- SpringBoot 2.x版本+MultipartFile设置指定文件上传大小
SpringBoot-versio:2.1.9-RELEASE 由于新版本的SpringBoot已经弃用了如下, 这种方式,提供了新的 配置方案. 这个是官方的介绍 Handling Multipar ...
- oracle基础(基本介绍)
数据库 磁盘上存储的数据的集合 在物理上表现为数据文件.日志文件和控制文件等 在逻辑上以表空间形式存在 必须首先创建数据库,然后才能使用Oracle 数据库实例 每个启动的数据库都对应一个数据库实例, ...
- Material for oauth 2
oauth 2 in 8 steps: https://knpuniversity.com/screencast/oauth Live demo of oauth 2 (with server im ...
- PHP中跳出循环break,continue,return,exit的区别
1. return 语句的作用 (1) return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行. (2) return 返回一个值给调用该方法的语句,返回值的数 ...
- Zabbix-(四)邮件、钉钉告警通知
Zabbix-(四)邮件.钉钉告警通知 一.前言 在之前的文章里,通过Zabbix对主机的磁盘.CPU以及内存进行了监控,并在首页Dashboard里创建了监控图形,但是只有当我们登录到Zabbix后 ...