你可以使用HTML和CSS来实现点击一个div展开一个高度为300的div，并显示一个两列的表格。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
background-color: gray;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
.expanded {
height: 300px;
}
.table-container {
display: none;
}
.table-container.show {
display: block;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table td {
padding: 10px;
border: 1px solid white;
}
.column {
width: 50%;
}
</style>
</head>
<body>
<div class="container" onclick="expandDiv()">点击展开</div>
<div class="table-container" id="tableContainer">
<table class="table">
<tr>
<td class="column">列1</td>
<td class="column">列2</td>
</tr>
<tr>
<td class="column">内容1</td>
<td class="column">内容2</td>
</tr>
<tr>
<td class="column">内容3</td>
<td class="column">内容4</td>
</tr>
</table>
</div>
<script>
function expandDiv() {
var tableContainer = document.getElementById('tableContainer');
tableContainer.classList.toggle('show');
}
</script>
</body>
</html>在上述代码中，首先定义了一个容器div，它的初始高度为200px，点击后可以展开为高度为300px。点击事件调用了expandDiv()函数。然后定义了一个表格容器div，初始状态下设置为display: none;，即不显示。当点击展开按钮后，通过添加或移除show类来控制表格容器的显示与隐藏。表格使用HTML的table和td标签创建，并设置了两列。
你可以将上述代码保存为一个HTML文件，用浏览器打开该文件，即可看到效果。当点击展开按钮时，表格会展开显示。
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/3068.html
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。
