html多个table对齐
时间: 2023-11-21 19:58:54 浏览: 34
可以使用CSS样式来对齐HTML中的多个table。其中,可以使用`table-layout: fixed;`来设置表格的布局方式为固定布局,这样可以使得表格的列宽度固定,方便对齐。同时,可以使用`display: inline-block;`来将多个表格设置为行内块元素,从而实现多个表格的对齐。
以下是一个示例代码:
```html
<style>
.table-wrapper {
display: inline-block;
vertical-align: top;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 200px;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
<div class="table-wrapper">
<table>
<tr>
<th>表格1</th>
</tr>
<tr>
<td>内容1</td>
</tr>
</table>
</div>
<div class="table-wrapper">
<table>
<tr>
<th>表格2</th>
</tr>
<tr>
<td>内容2</td>
</tr>
</table>
</div>
<div class="table-wrapper">
<table>
<tr>
<th>表格3</th>
</tr>
<tr>
<td>内容3</td>
</tr>
</table>
</div>
```
在上述代码中,我们首先定义了一个`.table-wrapper`的样式,将其设置为行内块元素,并使用`vertical-align: top;`来使得多个表格顶部对齐。然后,我们定义了`table`的样式,将其设置为固定布局,并设置了表格的宽度和边框样式。最后,我们在HTML中使用多个`<div>`元素来包裹每个表格,并分别应用了`.table-wrapper`样式。