本文介绍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>
分享到：
相关推荐
5. 对于复杂表格，可能需要处理嵌套的table或colspan/rowspan属性，这需要更复杂的逻辑来保持布局的正确性。 6. 生成新的HTML和CSS代码，提供给开发者进行进一步的调整和优化。 在提供的压缩包文件"table2css-2.9.0...
本篇将详细介绍如何通过CSS来控制嵌套表格的边框，以及涉及`div嵌套table`时的外边框设置。 首先，我们需要理解表格的基本结构。一个HTML表格由`<table>`元素开启，包含`<tr>`（行）元素，`<td>`（单元格）或`<th>`...
4. 保持数据关系：如果有嵌套表格或其他复杂结构，工具需要正确处理这些关系，保持转换后的div结构清晰。 5. 输出结果：最后，工具会生成新的HTML和CSS文件，用户可以在浏览器中预览和测试效果。 通过这个转换过程...
在本案例中，我们探讨的是如何使用Element UI的`el-table`组件实现多层嵌套显示的功能，这对于处理复杂的数据展示场景尤其有用。下面我们将深入解析这个实践中的关键点。 1. **多层嵌套的表格结构**： 在描述中...
通过组合多个 div，可以实现复杂的网页结构，而且由于样式与内容分离，改版和维护更为便捷。此外，CSS+div 的布局方式对搜索引擎友好，有利于提高网站的 SEO 排名。 然而，table 元素最初是为了展示数据而设计的，...
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-...
<div th:with="isEven=${prodStat.count}%2==0"></div> ``` - **说明**：此例中，在当前 `<div>` 元素范围内，`isEven` 被定义为 `${prodStat.count}%2==0` 的结果。 ##### 7. `th:style` - **功能介绍**：用于...
在网页设计中，使用`div`和`CSS`来模拟表格对角线是一种常见的技术，尤其是在需要自定义样式或者在不支持`<table>`元素的环境中。本篇将详细讲解如何利用`div`和`CSS`实现这一效果，并通过提供的`demo.html`文件中的...
DIV+CSS网页制作技术的优势在于其符合W3C国际标准，能够将表现与内容分离，提高搜索引擎对网页的索引效率，提高页面浏览速度，易于维护和改版。同时，DIV+CSS网页制作技术还可以减少页面代码，提高spider爬行效率，...
其次，table的嵌套可能导致代码复杂度增加，不利于代码阅读和维护。此外，table布局在响应式设计方面表现不佳，不易适应不同屏幕尺寸的设备。 相比之下，div+CSS布局提供了更高的灵活性和语义化。通过定义CSS样式，...
4. **嵌套处理**：处理表格中的嵌套表格，转换为相应的div嵌套结构。 5. **保持内容**：确保表格内的文本、图像等元素在转换后的位置和样式不变。 6. **生成新文件**：生成一个新的HTML文件，其中包含转换后的div+...
通过对传统 TABLE 布局的分析和对比，文章展示了 DIV+CSS 布局方法的优点和特点，并提供了实际的设计实例和代码片段，旨在帮助读者更好地理解和应用 DIV+CSS 布局方法。 DIV+CSS 布局方法的优点 DIV+CSS 布局方法...
总的来说，虽然table布局在某些特定场景下仍有一定价值，但Div+CSS布局已成为现代网页设计的主流。对于中小型企业来说，采用Div+CSS布局不仅可以提升用户体验，还能确保网站在不同设备上的良好表现，从而增强企业的...
-- 表格嵌套与共用表头实现 --> <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-...
新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格...
1. 创建独立的容器：将表头和表尾分别放入两个独立的div容器中，这样可以独立控制它们的样式和位置。 2. 固定定位（position: fixed）：利用CSS的`position`属性，设置表头和表尾为`fixed`，使其脱离正常文档流，...
在HTML中，`<div>`可以包含文本、图像、表格等各种元素，并且可以嵌套使用，为复杂的页面布局提供了可能。 要实现两个表格并排显示，我们可以通过设置`<div>`的`float`属性来达到目的。`float`属性允许元素浮动到其...