HTML 对齐 - 不并排显示

问题描述 投票:0回答:1

我写了以下代码。 输出一个接一个。 我希望它们彼此相邻显示。 然后,一旦空间被填满,我就会想移动到下一行。

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>

html
1个回答
0
投票

1- 删除
标签 2- 在标签的父级(此处为 teg)中使用 display: flex; 并使用边距和填充代替

© www.soinside.com 2019 - 2024. All rights reserved.