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 ...
随机推荐
- LeetCode随缘刷题之赎金信
欢迎评论区讨论. package leetcode.day_12_04; /** * 为了不在赎金信中暴露字迹,从杂志上搜索各个需要的字母,组成单词来表达意思. * * 给你一个赎金信 (ransom ...
- 聊一聊DTM子事务屏障功能之SQL Server版
背景 前面写了两篇如何用 C# 基于 DTM 轻松实现 SAGA 和 TCC 的分布式事务,其中有一个子事务屏障的功能,很好的处理了空补偿.悬挂.重复请求等异常问题. https://dtm.pub/ ...
- PTM人员(产品技术经理)
以下是一位PTM的工作总结: 责任感 作为PTM一定要有责任感,项目中的所有事情都要作为自己的事情,如果碰到有些项目中的工作没人负责,那么就是PTM的工作没有做到位. 全局观 作为PTM一定要比普 ...
- Fiddler监听Https请求响应
Fiddler问题 - creation of the root certificate was not successful 解决办法: http://localhost:8888/ 安装证书 ...
- springboot自动扫描添加的BeanDefinition源码解析
1. springboot启动过程中,首先会收集需要加载的bean的定义,作为BeanDefinition对象,添加到BeanFactory中去. 由于BeanFactory中只有getBean之类获 ...
- PyCharm编程软件详细安装教程
PyCharm编程软件安装教程&破解 一.官网下载软件 1. 网页搜索进入PyCharm官网下载页面(https://www.jetbrains.com/pycharm/download/ ) ...
- Python语法进阶（1）- 进程与线程编程
1.进程与多进程 1.1.什么是进程 进程就是程序执行的载体 什么叫多任务? 多任务就是操作系统可以同时运行多个任务.比如你一边在用浏览器学习,还一边在听音乐,,这就是多任务,至少同时有3个任务正在运 ...
- GCC 使用库文件名进行链接
使用 GCC 进行 C/C++ 代码编译时,如果代码中使用到了库函数,需要使用 -l 选项指定该库函数所在的库.如:-lm.-lrt.-lpthread等.这种方式使用的是库的缩写.一个库的文件名如果 ...
- 实体类分层命名PO，VO，BO，DTO，POJO，DAO，DO
一.Java中PO.DO.TO.DTO. VO. BO.POJO .DAO的概念 PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录 ...
- vue前端渲染和thymeleaf模板渲染冲突问题
vue前端渲染和thymeleaf模板渲染冲突问题 话不多说直接上现象: 解决办法: 在此做个记录吧,说不定以后会碰到 <<QIUQIU&LL>>