如何将单个表格行转换为两列?

Posted

技术标签:

【中文标题】如何将单个表格行转换为两列?【英文标题】:How to convert a single table row to two columns? 【发布时间】:2020-07-21 05:20:53 【问题描述】:

我有一个<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>

【问题讨论】:

【参考方案1】:

第一种方法是在表格中进行。您只需要使用 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>

【讨论】:

以上是关于如何将单个表格行转换为两列?的主要内容,如果未能解决你的问题,请参考以下文章

如何将EXCEL表格里一个单元格的数据拆分为两列

将 n 列一起发生的事件转换为两列成对的事件

将单行及其标题转换为两列[重复]

使用sas proc转置将行拆分为两列

将字典转换为两列熊猫数据框[重复]

Excel如何把同一列的内容拆分为两列