table元素使用bug
一、问题的产生
javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录.
二、实验
让我们先做一个简单的4*4表格
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
td{
border: 1px solid black;
width: 100px;
height: 50px;
text-align: center;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
合并
需求:合并第2,3行,且每行仅显示两列
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
td{
border: 1px solid black;
width: 100px;
height: 50px;
text-align: center;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
2
<br>
2
</td>
<td colspan="2" rowspan="2">
3
<br>
3
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
注:可以看到此时页面发生了变形
解决:仅设置第2行的colspan,而不设置rowspan
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
td{
border: 1px solid black;
width: 100px;
height: 50px;
text-align: center;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">
2
<br>
2
</td>
<td colspan="2">
3
<br>
3
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
三、总结
- 不知道有没有人和我一样,在最初学习单元格时,我们总是想象有一个行列整齐的表格(如第一张图),然后根据具体的需求对单元格进行合并,而这种方法导致的问题便是单元格的变形,目前的原因还无法确定,但是对于css的非正交性也算是有了一定直观的认识
- 解决这一问题的方法在于不要在同一个
<td>元素中同时设置colspan和rowspan两个属性
table元素使用bug的更多相关文章
- IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局
今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化, ...
- 关于table元素的认识
表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变.那是为啥?这是表格的框架的简单.明了.在传统的网页中使用没有边框的表格来排版是非常流行.在web标准逐渐深入设计领域以后, ...
- chrome渲染hover状态tranform相邻元素抖动bug
最近同事在使用 css3 的 transition + tranform 的时候影响了相邻的元素出现bug.或者说相邻的元素出现抖动bug. 然而把 hover 状态的 tranform 属性删了后, ...
- HTML&CSS Table元素详细解说
1.预热 css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式.所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了.关键是,你要学会去查资料 ...
- 【HTML】table元素
1.最简单的table <table> <tr> <th></th> </tr> <tr> <td></td& ...
- Bootstrap table 元素列内容超长自动折行显示方法?
共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...
- CSharp程序员学Android开发---3.Android内部元素不填充BUG
最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...
- IE & table & border & border-collapse & bug
shit IE table border bug & border-collapse bug > `border-collapse: collapse;` table { width: ...
- jq 获取table元素，ajax 静态填加数据
知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...
随机推荐
- MySQL语法命令之约束篇
文章目录 1.约束概述 1.1约束的分类 1.2添加约束 2.查看表中的约束 3. `not null` 非空约束 3.1 在 `create table` 时创建 3.2 在`alter table ...
- mock测试出现Circular view path [trade_records]: would dispatch back to the current handler URL
这是因为你的Controller中返回的视图名称与你当前的requestMapping名称一样,这并没有很好的解决方案,除非你改掉其中一个名字. 因为springframework test时你并没有 ...
- 聊聊MySQL的加锁规则《死磕MySQL系列 十五》
大家好,我是咔咔 不期速成,日拱一卒 本期来聊聊MySQL的加锁规则,知道这些规则后可以判断SQL语句的加锁范围,同时也可以写出更好的SQL语句,防止幻读问题的产生,在能力范围内最大程度的提升MySQ ...
- operator 之旅(一)
环境准备 依赖版本 MAC M1 kubernetes: 1.18.3 go: 1.17.6 kubebuilder:3.1.0 知识必备 Kubernetes的Group.Version.Resou ...
- Rainbond 5.6 版本发布，增加多种安装方式，优化拓扑图操作体验
Rainbond 5.6 版本,主要致力于提升拓扑图操作效率以及快速安装体验,降低用户使用门槛. 主要功能点解读: 支持单机快速体验 为了方便在单机电脑上快速安装体验Rainbond,当前版本支持通过 ...
- RFC2544学习频率“Learning Frequency”详解—信而泰网络测试仪实操
在RFC2544中, 会有一个Learning Frequency的字段让我们选择, 其值有4个, 分别是learn once, learn Every Trial, Learn Every Fram ...
- Smartbi扩展性怎么样，是否方便扩展开发产品已有功能？
Smartbi大数据分析工具具有很强的扩展性,通过"稳定内核+API扩展"的架构,通过报表插件扩展的方式,能满足很多应用项目的定制化需求,把新功能无缝集成到系统中. Smartbi ...
- prometheus k8s服务发现
Prometheus的服务发现在解决什么问题? 被监控的目标(target)是整个监控体系中重要组成部分,传统监控系统zabbix通过 网络发现的机制自动创建主机到zabbix-server,进而快速 ...
- 【windows 操作系统】【CPU】用户模式和内核模式（用户层和内核层）
所有的现代操作系统中,CPU是在两种不同的模式下运行的: 注意以下内容来自微软: windows用户模式和内核模式 运行 Windows 的计算机中的处理器有两个不同模式:用户模式 和内核模式 . 用 ...
- Unicode 详细介绍
总结起来为啥需要Unicodey就是为了适应全球化的发展,便于不同语言之间的兼容交互,而ASCII不再能胜任此任务了 UTF-8 与UTF-16的区别 UTF-8的优缺点 程序员那么到底该如何选择呢? ...