开发了一个动态表格制作程序,用的是谷歌浏览器。发现几个现象,记录如下:

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表格中各元素之间属性之间的相互影响的更多相关文章

  1. oracle数据库查询日期sql语句(范例)、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据(一整列)

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...

  2. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  3. HTML中body元素的属性

    body元素的属性 属性 描述 text 设定页面文字颜色 bgcolor 设定页面背景颜色 background 设定页面背景图像 bgproperties 设定页面的背景图像为固定状态(不随页面的 ...

  4. dom4j修改,获取,增加xml中某个元素的属性值

    XML文件: <?xml version="1.0" encoding="UTF-8"?> <vrvscript> <item I ...

  5. 将list中的元素按照属性分类成树状的map

    技术交流群: 233513714 public LinkedHashMap<String, List<TPhoneModel>> queryPhoneList(List< ...

  6. js中,浏览器中不同元素位置属性解析

    offset()   只对可见元素有效,获取匹配元素在当前视口的相对偏移,返回的对象有两个整型属性,top和left,像素计算: position() 相对父元素的偏移,position.left   ...

  7. java8 list转map,list集合中的元素的属性转set,list集合中对象的属性转list

    一.使用java8对list操作 1.1list转map private Map<String, Member> getMemberMap() { List<Member> m ...

  8. 去除sql表格中的unique 唯一属性----phpmyadmin 没发现哪里好直接操作

    ALTER TABLE tf_giftcard_record DROP INDEX oid;

  9. JavaScript中如何让图形旋转不会相互影响

    最近在联系JavaScript 二维绘图,经常会用到旋转,前几篇博文也提到过这类问题. 但是我忘记了JavaScript二维绘图中有关旋转最核心的两个方法:save()和restore() 在w3c上 ...

随机推荐

  1. (JavaScript) base64 字符串 和 ArrayBuffer 之间转换

    base64 --> ArrayBuffer function base64ToUint8Array(base64String) { const padding = '='.repeat((4 ...

  2. 《鸟哥的Linux私房菜--基础篇》学习

    第四章 显示日期与时间的指令:date 输入: (base) liyihuadeMacBook-Pro:~ liyihua$ date 输出: Thu Jun 6 08:44:02 CST 2019 ...

  3. SpringCloud 中集成Sentinel+Feign实现服务熔断降级

    Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...

  4. [考试反思]1004csp-s模拟测试59:惊醒

    一句话:我看错考试时间了,我以为11:30结束,T2T3暴力没来得及交. 为什么考试的时间忽然变了啊...没转过来 一定要看清考试的起止时间! 虽说T2T3连爆搜都没打,只打特殊性质只有32分.爆搜分 ...

  5. NOIP模拟测试11

    这次考试T1想到了正解没有去实现,然后就死了,不过我估计就算想到正解也会挂(26^2和暴力一个分),肝了两个小时T2屁都没蹦出来,T3没有搞清那个式子的含义. (不过一分没挂) T1:string 开 ...

  6. [springboot 开发单体web shop] 5. 用户登录及首页展示

    用户登录及前端展示 用户登录 在之前的文章中我们实现了用户注册和验证功能,接下来我们继续实现它的登录,以及登录成功之后要在页面上显示的信息. 接下来,我们来编写代码. 实现service 在com.l ...

  7. 1. 彤哥说netty系列之开篇(有个问卷调查)

    你好,我是彤哥,本篇是netty系列的第一篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 本文主要讲述netty系列的整体规划,并调查一下大家喜欢的学习方式. 知识点 ne ...

  8. javascript腾讯地图放到网页中的方法

    1 输入地址获取经纬度 http://lbs.qq.com/tool/getpoint/2 修改url https://apis.map.qq.com/uri/v1/marker?marker=coo ...

  9. H5+app -- 自动更新

    一.最近做了一个app自动更新功能,用的基本都是网上找得到的. 1.h5+ 规范 :  http://www.html5plus.org/doc/zh_cn/maps.html 2.环形进度条插件:h ...

  10. C语言程序设计100例之(10):最大公约数

    例10        最大公约数 问题描述 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. 输入数据 第 ...