一、问题的产生

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

二、实验

  1. 让我们先做一个简单的4*4表格

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. 	<title></title>
    5. 	<style type="text/css">
    6. 		td{
    7. 			border: 1px solid black;
    8. 			width: 100px;
    9. 			height: 50px;
    10. 			text-align: center;
    11. 			background-color: purple;
    12. 			color: white;
    13. 		}
    14. 	</style>
    15. </head>
    16. <body>
    17. 	<table>
    18. 		<tbody>
    19. 			<tr>
    20. 				<td>1</td>
    21. 				<td>2</td>
    22. 				<td>3</td>
    23. 				<td>4</td>
    24. 			</tr>
    25. 			<tr>
    26. 				<td>1</td>
    27. 				<td>2</td>
    28. 				<td>3</td>
    29. 				<td>4</td>
    30. 			</tr>
    31. 			<tr>
    32. 				<td>1</td>
    33. 				<td>2</td>
    34. 				<td>3</td>
    35. 				<td>4</td>
    36. 			</tr>
    37. 			<tr>
    38. 				<td>1</td>
    39. 				<td>2</td>
    40. 				<td>3</td>
    41. 				<td>4</td>
    42. 			</tr>
    43. 		</tbody>
    44. 	</table>
    45. </body>
    46. </html>

  2. 合并

    需求:合并第2,3行,且每行仅显示两列

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. 	<title></title>
    5. 	<style type="text/css">
    6. 		td{
    7. 			border: 1px solid black;
    8. 			width: 100px;
    9. 			height: 50px;
    10. 			text-align: center;
    11. 			background-color: purple;
    12. 			color: white;
    13. 		}
    14. 	</style>
    15. </head>
    16. <body>
    17. 	<table>
    18. 		<tbody>
    19. 			<tr>
    20. 				<td>1</td>
    21. 				<td>2</td>
    22. 				<td>3</td>
    23. 				<td>4</td>
    24. 			</tr>
    25. 			<tr>
    26. 				<td colspan="2" rowspan="2">
    27. 					2
    28. 					<br>
    29. 					2
    30. 				</td>
    31. 				<td colspan="2" rowspan="2">
    32. 					3
    33. 					<br>
    34. 					3
    35. 				</td>
    36. 			</tr>
    37. 			<tr>
    38. 				<td>1</td>
    39. 				<td>2</td>
    40. 				<td>3</td>
    41. 				<td>4</td>
    42. 			</tr>
    43. 		</tbody>
    44. 	</table>
    45. </body>
    46. </html>

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

  3. 解决:仅设置第2行的colspan,而不设置rowspan

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. 	<title></title>
    5. 	<style type="text/css">
    6. 		td{
    7. 			border: 1px solid black;
    8. 			width: 100px;
    9. 			height: 50px;
    10. 			text-align: center;
    11. 			background-color: purple;
    12. 			color: white;
    13. 		}
    14. 	</style>
    15. </head>
    16. <body>
    17. 	<table>
    18. 		<tbody>
    19. 			<tr>
    20. 				<td>1</td>
    21. 				<td>2</td>
    22. 				<td>3</td>
    23. 				<td>4</td>
    24. 			</tr>
    25. 			<tr>
    26. 				<td colspan="2">
    27. 					2
    28. 					<br>
    29. 					2
    30. 				</td>
    31. 				<td colspan="2">
    32. 					3
    33. 					<br>
    34. 					3
    35. 				</td>
    36. 			</tr>
    37. 			<tr>
    38. 				<td>1</td>
    39. 				<td>2</td>
    40. 				<td>3</td>
    41. 				<td>4</td>
    42. 			</tr>
    43. 		</tbody>
    44. 	</table>
    45. </body>
    46. </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. postman常用测试脚本

    测试脚本: 设置环境变量 var jsonData = JSON.parse(responseBody); postman.setGlobalVariable("5KMST", j ...

  2. C++职工管理系统

    目录 职工管理系统 一. 需求 二. 创建管理类 1.创建文件 2. 头文件实现 3. 源文件实现 三. 菜单功能 1. 添加成员函数 2. 功能实现 3. 测试菜单功能 四. 退出功能 1. 提供功 ...

  3. 《手把手教你》系列技巧篇（六十七）-java+ selenium自动化测试 - 读写excel文件 - 中篇（详细教程）

    1.简介 前面介绍了POI可以操作excel,也简单的提到另一个操作excle的工具,本篇介绍一个其他的可以操作excel的工具,但是这个工具有一个前提,excel文件版本只能是97-2003版本,如 ...

  4. nginx负载均衡中利用redis解决session一致性问题

    关于session一致性的现象及原因不是本小作文的重点,可以另行找杜丽娘O(∩_∩)O哈哈~重点是利用redis集中存储共享session的实际操作. 一.业务场景:nginx/tomcat/redi ...

  5. spring boot全局配置文件优先级

    前两篇介绍的application配置文件,即为spring boot全局配置文件.那么spring boot加载配置文件的时候,怎么确定加载哪个目录下哪个文件呢? spring boot默认的配置文 ...

  6. JAVA8学习——从使用角度深入Stream流(学习过程)

    Stream 流 初识Stream流 简单认识一下Stream:Stream类中的官方介绍: /** * A sequence of elements supporting sequential an ...

  7. 树莓派GPIO开发（二）RGB模块-PWM调节

    配置环境 系统:Raspbian11(官方64位) 设备:树莓派CM4 一.PWM简单介绍 全称:Pulse-width modulation,脉冲宽度调制,简单的数模转换方法 1.基本原理 脉冲宽度 ...

  8. Asp.net core IdentityServer4与传统基于角色的权限系统的集成

    写在前面 因为最近在忙别的,好久没水文了 今天来水一篇: 在学习或者做权限系统技术选型的过程中,经常有朋友有这样的疑问 : "IdentityServer4的能不能做到与传统基于角色的权限系 ...

  9. mysql is not null 执行效率低

    a表字段类型为int b表字段类型为varchar a left join b时如果查询条件是is not null,效率很快,is  null 效率很低 后来两者改为同类型 int,效率很高

  10. 还在用excel做分析？你已经out了！

    Excel 是个很有趣的工具,不管你是不是数据分析领域的打工人,都一定听过它的名字,甚至在全球拥有大量虔诚的粉丝.Excel这个名字其实源自英语中的" Excellence "一词 ...