在html默认布局规则中，表格元素属于块级元素，会默认占据一整行宽度，因此两个表格默认会上下排列，无法实现在同一水平线展示的效果。要实现这个需求，需要通过修改元素的布局属性来调整排列方式。
方法一：使用float浮动属性
浮动是早期常用的布局方式，给两个表格设置浮动属性后，它们会脱离普通文档流并排排列，需要注意浮动后父元素可能会出现高度塌陷的问题，需要额外处理。
具体实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动实现两个表格并排</title>
<style>
/* 给两个表格设置左浮动 */
.table-left {
float: left;
width: 45%;
margin-right: 5%;
border-collapse: collapse;
}
.table-right {
float: left;
width: 45%;
border-collapse: collapse;
}
/* 处理父元素高度塌陷 */
.table-wrap::after {
content: "";
display: block;
clear: both;
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-wrap">
<table class="table-left">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<table class="table-right">
<tr>
<th>城市</th>
<th>邮编</th>
</tr>
<tr>
<td>北京</td>
<td>100000</td>
</tr>
</table>
</div>
</body>
</html>
方法二：修改display属性为inline-block
将表格的display属性设置为inline-block，可以让表格变为行内块元素，既拥有块级元素的宽高设置能力，又能像行内元素一样并排排列，需要注意元素之间可能会有默认间隙。
实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>inline-block实现两个表格并排</title>
<style>
/* 设置表格为行内块元素 */
.table-item {
display: inline-block;
width: 45%;
vertical-align: top; /* 让两个表格顶部对齐 */
border-collapse: collapse;
}
/* 消除行内块元素的默认间隙 */
.table-wrap {
font-size: 0;
}
.table-wrap .table-item {
font-size: 16px; /* 恢复表格内部的字体大小 */
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-wrap">
<table class="table-item">
<tr>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<td>笔记本</td>
<td>5000</td>
</tr>
</table>
<table class="table-item">
<tr>
<th>库存</th>
<th>销量</th>
</tr>
<tr>
<td>120</td>
<td>89</td>
</tr>
</table>
</div>
</body>
</html>
方法三：使用flex弹性布局
flex布局是现代页面布局的常用方案，只需要给表格的父容器设置display为flex，子元素就会自动排列在同一水平线，不需要额外处理浮动或间隙问题，适配性更好。
实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>flex实现两个表格并排</title>
<style>
/* 父容器设置为flex布局 */
.table-wrap {
display: flex;
gap: 20px; /* 设置两个表格之间的间距 */
}
.table-item {
flex: 1; /* 两个表格平分父容器宽度 */
border-collapse: collapse;
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-wrap">
<table class="table-item">
<tr>
<th>课程</th>
<th>课时</th>
</tr>
<tr>
<td>语文</td>
<td>32</td>
</tr>
</table>
<table class="table-item">
<tr>
<th>教师</th>
<th>评分</th>
</tr>
<tr>
<td>李老师</td>
<td>4.8</td>
</tr>
</table>
</div>
</body>
</html>
不同方法的适用场景
- 如果需要兼容非常老旧的浏览器，可以选择浮动或者inline-block方案
- 如果是现代项目开发，优先选择flex布局，代码更简洁，维护成本更低
- 如果两个表格宽度固定，三种方案都可以使用，根据项目现有布局风格选择即可
需要注意的是，如果表格内容高度不一致，使用inline-block或者flex布局时可以通过设置vertical-align: top或者align-items: flex-start让两个表格顶部对齐，避免出现错位的情况。