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

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. 是true还是false呢?

    古来圣贤皆寂寞 惟有[努]者留其名 ---[努]原文:饮 先总结一个小知识点:0.null.NaN.undefined."" 转成布尔值为false 其他则一律返回true 1.首 ...

  2. webPack 4.0的零基础学习

    webPack 也更新到了4.0阶段,今天看了一下官网,总结一下,零基础的学习路径吧. (1)首先需要下载 webPake和webpack cli npm install webpack webpac ...

  3. 洛谷P3121 【[USACO15FEB]审查(黄金)Censoring (Gold)】

    双栈+AC自动机 这题其实跟一道KMP算法的题有一些渊源,它就是这道题的简单板. Clear: 给你两个串A,B,每次在B串中从左到右找串A,并将该子串删除,直到找不到为止,问你能删几次. 样例输入: ...

  4. [考试反思]0807NOIP模拟测试14:承认

    一大排并列Rank#9之一. 考试题还没改完(而且并不会模拟退火)所以题解又只能咕了 然而并不想吐槽T2对sjzyz是原题导致4个AC里面有3个他们的 虽说这次的成绩不怎么样,但是这次的考试过程是全新 ...

  5. python_day3(文件处理)

    1.文件处理 #Author:Elson Zeng #data = open("test").read() # f = open("test",'a',enco ...

  6. mysql group by分组查询后 查询个数

    mysql group by分组查询后 查询个数2个方法随便你选 <pre>select count(distinct colA) from table1;</pre>< ...

  7. 【algo&ds】【吐血整理】4.树和二叉树、完全二叉树、满二叉树、二叉查找树、平衡二叉树、堆、哈夫曼树、B树、字典树、红黑树、跳表、散列表

    本博客内容耗时4天整理,如果需要转载,请注明出处,谢谢. 1.树 1.1树的定义 在计算机科学中,树(英语:tree)是一种抽象数据类型(ADT)或是实作这种抽象数据类型的数据结构,用来模拟具有树状结 ...

  8. diff算法

    diff算法的作用计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面. 传统diff算法 通过循环递归对节点进行依次对比,算法复杂度达到 O(n^3) ...

  9. nyoj 35-表达式求值(stack, 栈的应用)

    35-表达式求值 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:37 submit:53 题目描述: ACM队的mdd想做一个计算器,但是,他要做的 ...

  10. nyoj 255-C小加 之 随机数 (map)

    255-C小加 之 随机数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:15 提交数:18 难度:1 题目描述: ACM队的“C小加”同学想在学校中请一些同学一起做一项问卷调查, ...