table与div互相嵌套注意
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Untitled Document</title>
<script language="JavaScript" src="js/prototype.js"></script>
<script language="JavaScript">
function changeStyle(){
if(document.getElementById('test').style.display=='none'){
alert("show");
document.getElementById('test').style.display='block'
}else{
alert("hide");
document.getElementById('test').style.display='none'
}
}
</script>
</head>
<body>
<input value="测试" type="button" onclick="changeStyle()">
<select type="button" value="测试" onchange="changeStyle();">
<option>1</option>
<option>2</option>
</select>
<table>
<tr>
<td><!--在table中嵌套div时,必须将div放在td中,否则达不到预期效果-->
<div id="test" style="display:none;">
<table>
<tr>
<td>
<input type="text" value="1"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
table嵌套div时,div必须放到td中,否则达不到预期的效果;但是div嵌套table时,div中写table、tr、td任意一个都可以正常显示。
如果要对tr、td隐藏时,这个时候div就不起作用了,可以直接对tr、td进行隐藏,当然如果闲一行一行隐藏太麻烦了,那就试试tbody吧,把div替换成tbody将需要隐藏的tr、td放到tbody中,这样就可以显示和隐藏了,见代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Untitled Document</title>
<script language="JavaScript" src="js/prototype.js"></script>
<script language="JavaScript">
function changeStyle(){
if(document.getElementById('test').style.display=='none'){
alert("show");
document.getElementById('test').style.display='block'
}else{
alert("hide");
document.getElementById('test').style.display='none'
}
}
</script>
</head>
<body>
<input value="测试" type="button" onclick="changeStyle()">
<select type="button" value="测试" onchange="changeStyle();">
<option>1</option>
<option>2</option>
</select>
<table>
<tbody id="test"><!--tbody替代了div的作用-->
<tr>
<td>
<input type="text" value="1"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
table与div互相嵌套注意的更多相关文章
- div中嵌套div速度将会同样很慢
---恢复内容开始--- div中嵌套了div速度将会同样很慢 最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...
- div中嵌套div水平垂直居中
div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...
- div里嵌套了img底部会有白块问题和图片一像素问题解决
div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- div中嵌套img元素,4px空白
写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- table 和 div 简单布局
table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- jquery 实践操作:div 动态嵌套页面
此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...
随机推荐
- python三大神器之装饰器
装饰器的形成过程 假如你要写一个计算函数执行时间的函数,代码如下: import time def func1(): print('in func1') def timer(func): def in ...
- python网络编程之协程
本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的 ...
- Random类与Random方法
class Test{ public static void main(String[] args){ int min=2; //定义随机数的最小值 int max=102; //定义随机数的最大值 ...
- CSS-cascading stle sheets
CSS-cascading stle sheets 1. CSS 什么是CSS?CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式 ...
- JS日期转换
用js将从后台得到的时间戳(毫秒数)转换为想要的日期格式 得到后台从数据库中拿到的数据我们希望格式是 2016年10月25日 17时37分30秒 或者 2016/10/25 17:37:30 然而我们 ...
- Nginx+Tomcat多站点访问默认主页问题-狒狒完美解决-Q9715234
<Engine name="Catalina" defaultHost="www.abc.com"> <Host name="www ...
- 一次简单的C++编译错误
快要下班的时候,开发部的一名小鲜肉找我帮忙解决一个问题: 才哥,我们提供给计费组的库在计费主机上编译报错了,但是提供给其他组用时没有编译报错.计费也不认,说编译器报的是我们代码上的错误,要我解决,帮我 ...
- 「专题训练」Hard problem(Codeforces Round #367 Div. 2 C)
题意与分析 题意:给出\(n\)个字符串,可以反转任意串,反转每个串都有其对应的花费\(c_i\).经过操作后是否能满足字符串\(\forall i \in [1,n] \text{且} i \in ...
- 「日常训练」ZgukistringZ(Codeforces Round #307 Div. 2 B)
题意与分析(CodeForces 551B) 这他妈哪里是日常训练,这是日常弟中弟. 题意是这样的,给出一个字符串A,再给出两个字符串B,C,求A中任意量字符交换后(不限制次数)能够得到的使B,C作为 ...
- Qt-QPalette-调色板学习
已经很久没有更新博客了,一是因为换了公司,完全是断网开发了,没有时间来写博客,最主要的就是温水煮青蛙,自己在舒适的环境中越来越懒了,最近打算强制自己更新一波.不知道能坚持多久.由于目前没有具体的Qt项 ...