前端 - 如何实现多个表格自动排布的布局？

Question

每个表格独立，放置在一个页面上，根据数据量的不同，长短不一。但是表格能够紧凑的排布，不会有空白。

Answer 1

实现多个表格自动排布的布局可以使用CSS的网格布局(Grid Layout)来实现。以下是一种可能的实现方式：

1. 创建一个具有网格布局的容器元素，可以是一个div元素或者一个table元素。

<div class="grid-container">  <!-- 表格1 -->  <table class="grid-item">...</table>  <!-- 表格2 -->  <table class="grid-item">...</table>  <!-- 表格3 -->  <table class="grid-item">...</table>  <!-- 其他表格... --></div>

2. 使用CSS网格布局样式来定义容器元素的布局。

.grid-container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列，每列最小宽度300px */  grid-gap: 10px; /* 网格间距 */}.grid-item {  /* 可以根据需要设置表格的样式 */}