<!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工具"是一个实用的辅助软件，它可以帮助开发者快速地将传统的表格布局转换为更现代、更符合Web标准的div+CSS布局，从而提升网站的...
本篇将详细介绍如何通过CSS来控制嵌套表格的边框，以及涉及`div嵌套table`时的外边框设置。 首先，我们需要理解表格的基本结构。一个HTML表格由`<table>`元素开启，包含`<tr>`（行）元素，`<td>`（单元格）或`<th>`...
标题"table转div、table转css"所指的就是这一过程，即利用特定工具将原本用表格布局的内容转化为更灵活的div+CSS布局。这种转换可以提高页面加载速度，提升用户体验，并更好地适应不同设备的显示需求。 描述中提到...
当表格嵌套过多时，代码可读性和维护性大大降低，而且在响应式设计上，table 表现不佳。 CSS+div 的优势主要体现在以下几个方面： 1. **代码简洁**：CSS+div 的布局方式可以减少 HTML 代码，节省带宽，对搜索引擎...
在示例代码中，可以看到外层`el-table`有一个`type="expand"`的列，当展开这一列时，会显示内嵌的表格。内嵌表格同样可以是多层次的，例如第二层`el-table`中还有可能包含更深层次的`el-table`。 2. **数据绑定与...
1. 块级元素与行内元素：`div`是块级元素，它默认会占据一整行的高度，而行内元素如`<span>`则只占用其内容所需的空间。在布局中，通常使用块级元素构建大的结构，行内元素处理小细节。 2. 宽度与高度：`div`的宽度...
在网页设计中，CSS（Cascading Style Sheets）与HTML中的`div`元素结合使用，可以实现更加精细和灵活的布局控制，包括对表格的样式调整。标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化...
在这些行元素内部，再嵌套更小的子元素，将它们的`display`属性设为`table-cell`，这样它们就会按照单元格的方式排列。 例如： ```css .container { display: table; width: 100%; } .row { display: table-...
3. 速度问题：DIV+CSS布局较 Table布局减少了页面代码，加载速度得到很大的提高，这在spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，spider就会认为这个页面无法访问，影响收录及权重。 4. 对排名的...
<div th:with="isEven=${prodStat.count}%2==0"></div> ``` - **说明**：此例中，在当前 `<div>` 元素范围内，`isEven` 被定义为 `${prodStat.count}%2==0` 的结果。 ##### 7. `th:style` - **功能介绍**：用于...
4. **嵌套处理**：处理表格中的嵌套表格，转换为相应的div嵌套结构。 5. **保持内容**：确保表格内的文本、图像等元素在转换后的位置和样式不变。 6. **生成新文件**：生成一个新的HTML文件，其中包含转换后的div+...
在网页设计领域，table和div是两种常用的布局工具，它们各有优缺点，合理应用能有效提升页面的可读性、可维护性和搜索引擎友好性。在早期的网页设计中，table曾是主流的布局方式，但随着HTML5和CSS的普及，div+CSS...
在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在数据量较大或者需要行列结构清晰展示信息时。"Table 表格 表头表尾浮动显示" 是一种优化表格用户体验的技术，它允许用户在滚动浏览长表格时，表头...
在构建中小型企业静态网站时，布局设计是至关重要的一步，它直接影响到用户的浏览体验和信息传递的效率。在这个案例中，我们关注的是“table布局”，一种传统的网页布局方式，尤其适用于展示结构化数据，如纺织品的...
通过对传统 TABLE 布局的分析和对比，文章展示了 DIV+CSS 布局方法的优点和特点，并提供了实际的设计实例和代码片段，旨在帮助读者更好地理解和应用 DIV+CSS 布局方法。 DIV+CSS 布局方法的优点 DIV+CSS 布局方法...
在网页设计中，使用`div`和`CSS`来模拟表格对角线是一种常见的技术，尤其是在需要自定义样式或者在不支持`<table>`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果，并通过提供的`demo.html`文件中的...
-- 表格嵌套与共用表头实现 --> <div v-for="item in scope.row.ext" :key="item.id"> <el-table :data="item" border :class="item!==scope.row.ext.default?'tab-thead-style':''" style="box-sizing: border-...
首先，我们要了解`<div>`的基本概念。`<div>`是一个无语义的容器元素，它的主要作用是将内容包裹起来，通过CSS（Cascading Style Sheets）样式来控制这些内容的外观和布局。在HTML中，`<div>`可以包含文本、图像、...