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上 ...
随机推荐
- 微软的分布式应用框架 Dapr Helloworld
Dapr HelloWorld Dapr Distributed Application Runtime. An event-driven, portable runtime for building ...
- 第三十章 System V信号量(一)
信号量 信号量和P.V原语由Dijkstra(迪杰斯特拉)提出 信号量: 互斥: P.V在同一进程中 同步: P.V在不同进程中 信号量值含义 S>0 : S表示可用资源个数 S=0 : 表示无 ...
- 分手是祝愿:dp
Description Zeit und Raum trennen dich und mich. 时空将你我分开. B 君在玩一个游戏,这个游戏n个灯和n个开关组成,给定这n个灯的初始状态,下标为从1 ...
- [考试反思]1013csp-s模拟测试71:徘徊
分差好大...但是从排名上看也许还可以接受? 不算太炸 但是这个还是算了吧... 其实状态不是很好. T1不会,打的搜索,想到一个剪枝但是感觉没什么用,所以没打. 考后打上,85了...打上另一个就9 ...
- 在vue中如何使用axios
1.前言 在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -& ...
- Spring Boot 2.X(十六):应用监控之 Spring Boot Actuator 使用及配置
Actuator 简介 Actuator 是 Spring Boot 提供的对应用系统的自省和监控功能.通过 Actuator,可以使用数据化的指标去度量应用的运行情况,比如查看服务器的磁盘.内存.C ...
- git 合并代码
分支 dev 及衍生分支 dev-ctj 一.rebase 1.git checkout dev-ctj 2.git rebase -i head~num[num 是本分支的提交数,多个提交数先合并为 ...
- 读《MySQL必知必会》我学到了什么?
前言 最近在写项目的时候发现自己的SQL基本功有些薄弱,遂上知乎查询MYSQL关键字,期望得到某些高赞答案的指点,于是乎发现了 https://www.zhihu.com/question/34840 ...
- Python之tkinter.messagebox弹窗
messagebox:tkinter的消息框.对话框 一.messagebox.showinfo(title='提示', message='错误') from tkinter import * fro ...
- PHP laravel+thrift+swoole打造微服务框架
Laravel作为最受欢迎的php web框架一直广受广大互联网公司的喜爱. 笔者也参与过一些由laravel开发的项目.虽然laravel的性能广受诟病但是业界也有一些比较好的解决方案,比如堆机器, ...