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 ...
随机推荐
- idea导入mavenJar、mavenWeb项目
两种项目都是一样的,都是maven项目,所以主要是找到pom.xml,项目最好先放在idea的工作目录下,且工作目录最好为英文 1.打开idea,选择import project 2.把项目放到ide ...
- 01 前端基础之HTML
目录 前端基础之HTML HTML简介 如何创建及展示 head内常见标签 body内基本标签 特殊符号 常见标签 标签的两大重要属性 列表标签 表格标签 form表单(很重要) 初次体验前后端交互 ...
- Solution -「AGC 019E」「AT 2704」Shuffle and Swap
\(\mathcal{Description}\) Link. 给定 \(01\) 序列 \(\{A_n\}\) 和 \(\{B_n\}\),其中 \(1\) 的个数均为 \(k\).记 \( ...
- PyTorch图文安装教程(Win10),含遇到的问题及解决办法
PyTorch安装教程(Win10),含遇到的问题及解决办法 1. 环境准备 首先,打开PyTorch官网:https://pytorch.org/get-started/locally/ 向下可以看 ...
- Centos下Ambari2.7.5的编译和安装
前言 终于,要开始写点大数据相关的文章了.当真的要开始写老本行的时候,还是考虑了挺久的.一是不知道从何处写起,二是如何能写点有意思的. 我们常说,过程比结果重要.也是有很多人喜欢准备完全之后,才会开始 ...
- Windows原理深入学习系列-强制完整性控制
欢迎关注微信公众号:[信安成长计划] 0x00 目录 0x01 介绍 0x02 完整性等级 0x03 文件读取测试 0x04 进程注入测试 0x05 原理分析 Win10_x64_20H2 0x06 ...
- [旧][Android] Retrofit 源码分析之 ServiceMethod 对象
备注 原发表于2016.05.03,资料已过时,仅作备份,谨慎参考 前言 大家好,我又来学习 Retrofit 了,可能这是最后一篇关于 Retrofit 框架的文章了.我发现源码分析这回事,当时看明 ...
- 一文带你秒懂商业智能BI的价值所在!
首先,先来跟大家解释说明一下什么是商业智能?这应该也是刚刚接触商业智能的小伙伴最想要了解的问题,平时刷微博.看头条时都会看到数据可视化.数据分析和大数据等词汇时,但是对它们如同熟悉的陌生人一般,那么这 ...
- 目前数据可视化工具排名如何?好用的BI可视化软件
数据可视化用专业术语来就是通过视觉的方式向人类展示数据,这种在文本基础上的图表即简单又实用,而且相关性.趋势分析都非常明确,也非常可靠,通过图表一目了然.用通俗的话说就是画一张图表,将数据以比例的方式 ...
- linux目录跳转的好武器z.sh
转至:https://blog.csdn.net/molaifeng/article/details/14123123 中午刷微博时看到一篇有关z.sh的介绍. 众所周知,在linux系统中进入目录都 ...