1 需求
2 语法
3 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格水平居中、垂直靠上示例</title>
<style>
/* 设置包含表格的div样式，使其内容水平居中 */
.container {
text-align: center; /* 用于行内或内联元素，但不影响块级元素如表格 */
display: flex;
justify-content: center; /* 使用flex布局使块级元素居中 */
align-items: flex-start; /* 垂直靠上 */
height: 100vh; /* 设置容器高度为视口高度，以便看到垂直靠上的效果 */
margin: 0; /* 移除默认边距 */
}
/* 表格样式 */
table {
border-collapse: collapse; /* 合并边框 */
margin: 0 auto; /* 上下边距为0，左右自动，使表格在水平方向上居中 */
}
th, td {
border: 1px solid black; /* 添加边框以便查看 */
padding: 8px; /* 添加内边距 */
}
</style>
</head>
<body>
<div class="container">
<table>
<caption>标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<!-- 其他行和列... -->
</tbody>
</table>
</div>
</body>
</html>
