如何将单个 table 行转换为两列？

Question

我有一个 <table></table> 可以在一行中显示项目。我希望项目显示为两列，一列显示前三项，另一列显示最后两项。这可以通过直接 HTML 完成还是我需要 CSS？代码建议？```

     <div id="mapControls" class="container">
        <table>
            <tr>
                <td><input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</td>
                <td><input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</td>
                <td><input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</td>
                <td><input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</td>
                <td><input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</td>
            </tr>
        </table>
    </div>

Answer 1

第一种方法是 table。您只需要使用 3 行并重新排列您的单元格。第二种方式可能是首选并使用 flexbox

<div id="mapControls" class="container">
  <table>
    <tr>
      <td><input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</td>
      <td><input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</td>
      <td><input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</td>

      <td> </td>
    </tr>
  </table>
</div>

#container {
  display: flex;
  justify-content: space-evenly;
}

#left,
#right {
  display: flex;
  flex-direction: column;
}

<div id='container'>
  <div id='left'>
    <span>    <input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</span>
    <span>    <input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</span>
    <span>   <input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</span>
  </div>

  <div id='right'>


    <span>  <input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</span>
    <span>  <input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</span>
  </div>
</div>

如何将单个 table 行转换为两列？

How to convert a single table row to two columns?

html

css

html-table

css-tables