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上 ...
随机推荐
- (JavaScript) base64 字符串 和 ArrayBuffer 之间转换
base64 --> ArrayBuffer function base64ToUint8Array(base64String) { const padding = '='.repeat((4 ...
- 《鸟哥的Linux私房菜--基础篇》学习
第四章 显示日期与时间的指令:date 输入: (base) liyihuadeMacBook-Pro:~ liyihua$ date 输出: Thu Jun 6 08:44:02 CST 2019 ...
- SpringCloud 中集成Sentinel+Feign实现服务熔断降级
Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...
- [考试反思]1004csp-s模拟测试59:惊醒
一句话:我看错考试时间了,我以为11:30结束,T2T3暴力没来得及交. 为什么考试的时间忽然变了啊...没转过来 一定要看清考试的起止时间! 虽说T2T3连爆搜都没打,只打特殊性质只有32分.爆搜分 ...
- NOIP模拟测试11
这次考试T1想到了正解没有去实现,然后就死了,不过我估计就算想到正解也会挂(26^2和暴力一个分),肝了两个小时T2屁都没蹦出来,T3没有搞清那个式子的含义. (不过一分没挂) T1:string 开 ...
- [springboot 开发单体web shop] 5. 用户登录及首页展示
用户登录及前端展示 用户登录 在之前的文章中我们实现了用户注册和验证功能,接下来我们继续实现它的登录,以及登录成功之后要在页面上显示的信息. 接下来,我们来编写代码. 实现service 在com.l ...
- 1. 彤哥说netty系列之开篇(有个问卷调查)
你好,我是彤哥,本篇是netty系列的第一篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 本文主要讲述netty系列的整体规划,并调查一下大家喜欢的学习方式. 知识点 ne ...
- javascript腾讯地图放到网页中的方法
1 输入地址获取经纬度 http://lbs.qq.com/tool/getpoint/2 修改url https://apis.map.qq.com/uri/v1/marker?marker=coo ...
- H5+app -- 自动更新
一.最近做了一个app自动更新功能,用的基本都是网上找得到的. 1.h5+ 规范 : http://www.html5plus.org/doc/zh_cn/maps.html 2.环形进度条插件:h ...
- C语言程序设计100例之(10):最大公约数
例10 最大公约数 问题描述 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. 输入数据 第 ...