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

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. USACO 07DEC 道路建设(Building Roads)

    Farmer John had just acquired several new farms! He wants to connect the farms with roads so that he ...

  2. Covenant cc 用法

    新出现的cc框架,之前看hack the box有人用过,不过还是用cs比较多, 这里把之前的笔记搬运过来 ---   设置covenant git clone --recurse-submodule ...

  3. [考试反思]0821NOIP模拟测试28:沉默

    这次不能把我前面的分数段都列出来了,因为实在太多了. 这次也不能把我后面的分数段列出来了,因为我后面没有了. yxm,mikufun,Pairs170100分第10.50分第29. 我:爆零,倒数第一 ...

  4. js内容溢出用省略号(...)表示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 「Luogu 3792」由乃与大母神原型和偶像崇拜

    更好的阅读体验 Portal Portal1: Luogu Description 给你一个序列\(a\) 每次两个操作: 修改\(x\)位置的值为\(y\): 查询区间\([l, r]\)是否可以重 ...

  6. [LINQ2Dapper]最完整Dapper To Linq框架(四)---Linq和SQL并行使用

    目录 [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询 [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询 [LINQ2Dapp ...

  7. 连接xshell 时 连不上的问题

      最近这一周由于自己的xshell突然连接不到虚拟机,在网上找了很多种方法也没能解决,以至于自己在学习很多知识的时候都没能很好的去验证,去尝试.最后在求助大佬的时候终于将xshell重新连接到了虚拟 ...

  8. Hazel,自动整理文件,让你的 Mac 井井有条

    原文地址 https://sspai.com/post/35225 让我们从实际需求出发,看看问题出在哪里,并在此基础上认识和学习使用 Hazel. 电脑随着使用时间的增长,其中的文件也在疯狂的增长, ...

  9. linux环境中,两个不同网段的机器互通

    linux环境中,两个不同网段的机器互通   人评论3690人阅读2019-11-18 14:50:21   环境如下:   host1 单网卡 eth0 172.24.100.15/16   hos ...

  10. .net 上传文件:超过了最大请求长度

    修改 web.config: 该方法是.net框架限制 添加: <system.web> ... ... <httpRuntime   ... maxRequestLength=&q ...