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上 ...
随机推荐
- Spring Boot 日志处理你还在用Logback?
▶ Log4j2 性能 https://logging.apache.org/log4j/2.x/performance.html ▶ Spring Boot 依赖与配置 Maven 依赖 <! ...
- Java设计模式:23种设计模式
1. 软件设计模式概述 2. GoF 的 23 种设计模式的分类和功能 3. UML中的类图及类图之间的关系 4. 开闭原则——面向对象设计原则 5. 里氏替换原则——面向对象设计原则 6. 依赖倒置 ...
- 使用 HTML5 WebSocket 构建实时 Web 应用
原文地址:http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/ HTML5 WebSocket 简介和实战演练 本文主要介绍 ...
- 如何进行kubernetes问题的排障
排障的前置条件 k8s的成熟度很高,伴随着整个项目的扩增,以及新功能和新流程的不断引入,也伴随这产生了一些问题.虽然自动化测试可以排除掉大部分,但是一些复杂流程以及极端情况却很难做到bug的完全覆盖. ...
- 「2019.8.9 考试」神仙的dp总让人无所适从
T1是个容斥,我掐手指一算他为了卡容斥的正确性,绝不会把n和m出的很相近($O(n^2)$算法在nm相等的时候达到最高时间复杂度),不然就太好做了,于是开了特判+各种卡常和滚动数组优化,卡到了70分, ...
- 一个帮助理清思路的神奇工具--debug
今天在回顾复习之前的知识的时候,对嵌套循环犯了迷糊,于是我使用了debug这个方法,不仅让我弄清楚嵌套循环输出结果是如何得来,也让我明白了具体流程. 在这里,IDE我使用的是PyCharm,自然用它自 ...
- Comparable接口的实现和使用
1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 .实现此接口的对象列表(和数组)可 ...
- Keras 中间层可视化,附代码详解,以Mnist数字为对象
最近搭建了个Resnet50 的神经网络模型,相看一看中间某一层的输出结果,想感性的感受下逐层提取特征的过程,以数字0为对象,对数字0逐层提取特征,话不多说直接上代码,关于如何搭建Resnet,可以参 ...
- ChickenLegend Image
- requests模块使用代理
1.创建try_proxies.py文件import requestsproxies = {"http":"http:117.135.34.6:8060"}he ...