如何将单个表格行转换为两列?
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>
【讨论】:
以上是关于如何将单个表格行转换为两列?的主要内容,如果未能解决你的问题,请参考以下文章