我写了以下代码。 输出一个接一个。 我希望它们彼此相邻显示。 然后,一旦空间被填满,我就会想移动到下一行。
table {
border-collapse: collapse
}
table,
td {
border: 1px solid black;
padding: 3px;
text-align: center
}
th {
border: 1px solid black;
padding: 3px;
text-align: center;
background-color: yellow
}
<html>
<head>
</head>
<body style="width:625px">
<left>
<br>
<b><u></u></b>
<br>
<table>
<colgroup>
<col width="200" style="background-color:Aqua">
<col width="150">
<tr>
<th>4G_VS_5G</th>
<th>COUNT</th>
</tr>
<tr>
<td>
4G</td>
<td> 100</td>
</tr>
<tr>
<td>
5G</td>
<td> 200
</td>
</tr>
</table>
<b><u></u></b>
<br>
<table>
<colgroup>
<col width="200" style="background-color:Aqua">
<col width="150">
<tr>
<th>TOTAL LINES</th>
<th>COUNT</th>
</tr>
<tr>
<td>
CLIENT1 </td>
<td> 5</td>
</tr>
<tr>
<td>
CLIENT2 </td>
<td> 20</td>
</tr>
<tr>
<td>
CLIENT3 </td>
<td> 23</td>
</tr>
<tr>
<td>
CLIENT4 </td>
<td> 2
</td>
</tr>
</table>
<br>
</center>
</body>
</html>
1- 删除
标签
2- 在标签的父级(此处为 teg)中使用 display: flex;
并使用边距和填充代替