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

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. [springboot 开发单体web shop] 4. Swagger生成Javadoc

    Swagger生成JavaDoc 在日常的工作中,特别是现在前后端分离模式之下,接口的提供造成了我们前后端开发人员的沟通 成本大量提升,因为沟通不到位,不及时而造成的[撕币]事件都成了日常工作.特别是 ...

  2. vi文本编辑器命令

    基本上 vi 共分为三种模式,分别是『一般模式』.『编辑模式』与『指令列命令模式』. 这三种模式的作用分别是: 一般模式:以 vi 打开一个档案就直接进入一般模式了(这是默认的模式).在这个模式中, ...

  3. 学习笔记55_Nhibernate

    另一种ORM框架 1.添加各种dll 2.添加配置信息,根据文档直接复制粘贴.config //一般下载Nhibernate-3.0.0.Alpha2-bin包,会有Configuration_Tem ...

  4. 表格导出到excel的样式消失该如何修改

    工作中遇到一需求,要将后台的表格导出到excel后的表格样式该如何修改呢? 其实表格导出首先需要了解两个插件:jquery.table2excel.js和tableExport.js 1.第一步,写一 ...

  5. day 2 DP专场

    上午讲了一上午背包,从01背包到完全背包到多重背包,感觉也没说什么,旁边的大佬一直在飞鸽里说让老师讲快点,然而最后也没人敢跟老师说.... 例题真的各个都是神仙题, 挂饰 好像就是一上午最简单的... ...

  6. 开源跳板机(堡垒机)系统 Jumpserver安装教程(带图文)

    环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce 0 # 可以设置配置文件永久关闭 $ syste ...

  7. K8S入门系列之集群二进制部署-->master篇(二)

    组件版本和配置策略 组件版本 Kubernetes 1.16.2 Docker 19.03-ce Etcd 3.3.17 https://github.com/etcd-io/etcd/release ...

  8. 在VMware环境下安装Windows2008

    1.软硬件安装 软件:推荐使用VMware,这里我使用的是VMware15 镜像:Windows 2008 如果没有镜像可以到这里 链接:https://pan.baidu.com/s/1r_7K-U ...

  9. Vue躬行记(9)——Vuex

    Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景.Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性.正确性和可预测性,这不仅让调试变得可追踪,还让代 ...

  10. Python 常用模块系列(2)--time module and datatime module

    import time print (help(time)) #time帮助文档 1. time模块--三种时间表现形式: 1° 时间戳--如:time.time()  #从python创立以来,到当 ...