一、问题的产生

javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录.

二、实验

  1. 让我们先做一个简单的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. 合并

    需求:合并第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>

    注:可以看到此时页面发生了变形

  3. 解决:仅设置第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>

三、总结
  1. 不知道有没有人和我一样,在最初学习单元格时,我们总是想象有一个行列整齐的表格(如第一张图),然后根据具体的需求对单元格进行合并,而这种方法导致的问题便是单元格的变形,目前的原因还无法确定,但是对于css的非正交性也算是有了一定直观的认识
  2. 解决这一问题的方法在于不要在同一个<td>元素中同时设置colspan和rowspan两个属性

table元素使用bug的更多相关文章

  1. IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局

    今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化, ...

  2. 关于table元素的认识

    表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变.那是为啥?这是表格的框架的简单.明了.在传统的网页中使用没有边框的表格来排版是非常流行.在web标准逐渐深入设计领域以后, ...

  3. chrome渲染hover状态tranform相邻元素抖动bug

    最近同事在使用 css3 的 transition + tranform 的时候影响了相邻的元素出现bug.或者说相邻的元素出现抖动bug. 然而把 hover 状态的 tranform 属性删了后, ...

  4. HTML&CSS Table元素详细解说

    1.预热 css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式.所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了.关键是,你要学会去查资料 ...

  5. 【HTML】table元素

    1.最简单的table <table> <tr> <th></th> </tr> <tr> <td></td& ...

  6. Bootstrap table 元素列内容超长自动折行显示方法?

    共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...

  7. CSharp程序员学Android开发---3.Android内部元素不填充BUG

    最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...

  8. IE & table & border & border-collapse & bug

    shit IE table border bug & border-collapse bug > `border-collapse: collapse;` table { width: ...

  9. jq 获取table元素，ajax 静态填加数据

    知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...

随机推荐

  1. docker基础——4.网络待补

    docker network ls bridge:NAT桥 host:共用宿主机namespace的UTS.IPC.Network none:只有lo,没有网卡 其他待补

  2. Git忽略文件.gitignore的使用

    本博客旨在自我学习使用,如有任何疑问请及时联系博主 1.WHY? 当你使用git add .的时候有没有遇到把你不想提交的文件也添加到了缓存中去?比如项目的本地配置信息,如果你上传到Git中去其他人p ...

  3. Docker使用Dockerfile构建新的镜像

    构建镜像步骤; 1.创建Dockerfile文件,该文件是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明. vim Dockerfile //每一个指令都会在镜像上创建一个新 ...

  4. Lesson11——NumPy 位运算

    NumPy 教程目录 Lesson11--NumPy 位运算 NumPy "bitwise_" 开头的函数是位运算函数. NumPy 位运算包括以下几个函数: 函数 描述 bitw ...

  5. 9、架构--动静分离、rewrite、HTTPS

    笔记 1.晨考 1.说明反向代理跟负载均衡有哪些区别? 2.负载均衡分配流量的几种方式? 1.轮询 2.权重 3.ip_hash 3.负载均衡部署BBS的步骤 2.昨日问题 3.今日内容 1.资源分离 ...

  6. Note -「线性规划」学习笔记

    \(\mathcal{Definition}\)   线性规划(Linear Programming, LP)形式上是对如下问题的描述: \[\operatorname{maximize}~~~~z= ...

  7. 详细介绍rar是什么由谁发明

    RAR是一种专利文件格式,用于数据紧缩与归档打包,开发者为尤金·罗谢尔(俄语:Евгений Лазаревич Рошал,拉丁转写:Yevgeny Lazarevich Roshal),RAR的全 ...

  8. 『德不孤』Pytest框架 — 4、Pytest跳过测试用例

    目录 1.无条件跳过skip 2.有条件跳过skipif 3.练习 自动化测试执行过程中,我们常常出现这种情况:因为功能阻塞,未实现或者环境有问题等等原因,一些用例执行不了, 如果我们注释掉或删除掉这 ...

  9. DH密钥交换协议

    密钥交换 密钥交换简单点来说就是允许两名用户在公开媒体上交换信息以生成"一致"的.可以共享的密钥.也就是由甲方产出一对密钥(公钥.私钥),乙方依照甲方公钥产生乙方密钥对(公钥.私钥 ...

  10. 华为服务器设置iBMC管理网口IP地址，开启Monitor图文教程

    设置iBMC管理网口IP地址 默认用户名:root 默认密码:Huawei12#$ 操作步骤 服务器重启时,当出现如下界面时,重复按"Delete". 在启动过程出现输入密码对话框 ...