展示后台传来数组,每行最多10个反复在一个tr里,超过换行,根据元素个数动态调整table的内容。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flexbox wrapping: Wrapping when flex-direction is row</title>
<style>
.box>* {
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}
</style>
<style>
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 9%;
max-width:9%;
}
</style>
</head>
<body>
<section>
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>One2</div>
<div>Two2</div>
<div>Three2</div>
<div>Four2</div>
<div>Five2</div>
<div>Six2</div>
<div>Seven2</div>
<div>Eight2</div>
<div>Nine2</div>
<div>Ten2</div>
<div>One3</div>
<div>Two3</div>
<div>Three3</div>
<div>Four3</div>
<div>Five3</div>
<div>Six3</div>
</div>
</section>
</body>
</html>