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 ...
随机推荐
- Redis——(主从复制、哨兵模式、集群)的部署及搭建
Redis--(主从复制.哨兵模式.集群)的部署及搭建 重点: 主从复制:主从复制是高可用redis的基础,主从复制主要实现了数据的多机备份,以及对于读操作的负载均衡和简单的故障恢复. 哨兵和集群都是 ...
- Arch Linux遇到的坑（下）
明天就要开学,终于赶忙又熟悉了新环境的用法,现在已经基本满足了日常需求,再记录一些坑-. 电脑没有声音 因为上次离奇的自己好了,我就没有再管了,但是后来使用chrome的时候还是没有声音,我就用了图形 ...
- VMware中Ubuntu18配置静态IP地址
1. VMware:编辑 -> 虚拟网络编辑器 -> 更改设置 2. 取消选中:使用本地DHCP服务将IP地址分配给虚拟机,并记住子网ip 3. 点击NAT设置,记住网关地址 正常情况下V ...
- Byobu安装与使用
机子为Ubuntu18 Byobu安装 sudo apt-get install byobu Byobu安装后默认禁用,需要启用Byobu,之后每次登陆自动启用Byobu byobu-enable 还 ...
- 依赖于angular的table组件
组件实现了以下功能 1. 列宽可动态拖动 2. 列数据排序 3. 列过滤 4. 列位置自由调整 除了需要引入angular.js(我用的是1.4.6版本),还需要引用一个angular衍生出来的插件n ...
- 【Java分享客栈】我有一个朋友，和前端工程师联调接口被狠狠鄙视了一番。
前言 我有一个朋友,昨天和前端工程师联调一个接口,然后被狠狠鄙视了一番. 大家知道,自从前后端分离以后,像我一样一直以Java工程师为傲而自居的码圣们就砍掉了一半脊梁,从此被贴上了"Java ...
- SPYEYE手机远程监控和官方SPYEYE间谍软件最新下载方式
听起来远程控制手机好像很高级的样子,但是实现起来其实非常简单.实现原理如下: 运行程序,让程序不停地读取数据 用手机给手机发送邮件 判断是否读取到指定主题的手机,如果有,则获取手机内容 根据邮件内容, ...
- 【C# 线程】 延迟初始化
1. 简介 1.延迟初始化出现于.NET 4.0,主要用于提高性能,避免浪费计算,并减少程序内存要求.也可以称为,按需加载. 2.从net 4.0开始,C#开始支持延迟初始化,通过Lazy关键字,我们 ...
- N种排序算法
本文根据<算法(第4版)>和<算法图解>整理.文中代码使用python编写. (一)选择排序 每次遍历整个数组,选出其中最小值.如果数组长度为n,则需要(n-1)+(n-2)+ ...
- 无状态子域名爆破工具：ksubdomain
概述 开源地址:https://github.com/knownsec/ksubdomain 二进制文件下载:https://github.com/knownsec/ksubdomain/releas ...