ASP网页中多个表格横排显示的代码
时间: 2024-09-21 11:06:23 浏览: 60
在asp.net网页中显示数学符号的代码
在ASP网页中,如果你想将多个表格水平排列显示,可以利用HTML的`<div>`标签和CSS布局技巧。这里提供一种简单的示例,你可以使用`display: inline-block`属性来让表格像元素一样横向并排:
```asp
<!DOCTYPE html>
<html>
<head>
<style>
.tables-container {
display: flex;
justify-content: space-between; /* 间距均匀分布 */
}
.table-element {
margin-bottom: 10px; /* 为了美观,给每个表格留一些间隔 */
border: 1px solid #ccc; /* 可选,仅用于示例中的边框效果 */
display: inline-block;
width: 45%; /* 调整此值以控制每个表格的宽度 */
}
</style>
</head>
<body>
<div class="tables-container">
<table class="table-element" id="table1">
<!-- 表格1的内容 -->
<tr><th>标题1</th><td>数据1</td></tr>
<!-- ... -->
</table>
<table class="table-element" id="table2">
<!-- 表格2的内容 -->
<tr><th>标题2</th><td>数据2</td></tr>
<!-- ... -->
</table>
<!-- 添加更多表格... -->
</div>
</body>
</html>
```
在这个例子中,`.table-element` 类应用了 `display: inline-block` 和 `width: 45%;`,使得它们在容器 `.tables-container` 中按需横向排列。每个表格之间有适当的间距。
阅读全文