我有一张桌子，它有两行列。 如果其中之一为空，则应上移至上一行。
示例： 最初-
|td1 | td2|
|td3 | |
|td5 | td6|
我需要什么-
|td1 | td2|
|td3 | td5|
|td6 | |
这是我的代码：
<div class="row pl-3 bg-white" id="interests">
<div class="col-md-12">
<table class="table table-borderless table-condensed table-responsive-md">
<tbody>
<tr>
<th scope="row"><img id="icons" src="assets/ic_Funding.svg"></img>
</th>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>
<th scope="row"><img id="icons" src="assets/ic_ITspends.svg"></img>
</img>
</th>
<td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>
</tr>
<tr>
<th scope="row"><img id="icons" src="assets/ic_investors.svg"></img>
</th>
<td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
<!-- <th scope="row"><img id="icons" src="assets/ic_Hiring.svg"></img></th>
<td>What if this doesn't exist. Can I move td below here?</td> -->
</tr>
<tr>
<th scope="row"><img id="icons" src="assets/ic_Interest Signals.svg"></img>
</th>
<td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum”.</td>
<th scope="row"><img id="icons" src="assets/ic_WebsiteTechStack.svg"></img>
</th>
<td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<th scope="row"><img id="icons" src="assets/ic_Events.svg"></img>
</th>
<td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
<th scope="row"><img id="icons" src="assets/ic_CompanyTechStack.svg"></img>
</th>
<td>sunt in culpa qui officia deserunt mollit anim id est laborum</td>
</tr>
</tbody>
</table>
</div>
</div>
我在这里错过了什么吗？在每个col-md-6中，我之前有两个表。现在我只制作了一张桌子，所以行被重新排列了，但是没有。
答案 0 :(得分：3)
有2个问题：
<table>，则图像不会显示在表中。这是2个方案：
col-md-6（用于卡），并在其中使用<table> <div class="row pl-3 bg-white" id="interests">
<div class="col-md-6">
<table>
<tr>
<th scope="row"><img id="icons" src="http://placehold.it/50x50"></th>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</td>
...
图像将垂直居中对齐，文本将尽可能靠近图像（向左对齐）。
我们可以使用其他元素并使用Flex或Grid等代替<table>。
col-md-2用于图像，col-md-4用于文本，并固定图像位置HTML
<div class="row pl-3 bg-white" id="interests">
<div class="col-md-2" data-scope="row"><img id="icons" src="http://placehold.it/200x200"></div>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
...
CSS
[data-scope="row"] {
display: flex;
align-items: center;
justify-content: center;
}
[data-scope="row"] > img {
max-width: 100%;
}
这种方法使我们减少了包装元素（<div>和<table>），并且我们可以根据需要调整图像的位置。图片和文字之间的距离是固定的。
P.S。
data-scope属性。我们可以使用其他CSS选择器，例如添加一个CSS类。icons）。 Fiddles中提供的代码仅用于说明布局。答案 1 :(得分：1)
我已经在div中创建了您的表格。希望对您有帮助。谢谢
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="row pl-4 bg-white" id="interests">
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="media">
<img class="mr-3"id="icons" src="assets/ic_Funding.svg">
<div class="media-body">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
没有一种真正好的方法可以直接使用HTML表完成您要查找的内容。 tr是表行。因此2个不同tr中的任何内容都将位于两个不同的行中。 我建议实际上是制作一个包含1行和2个单元格的表。并且在每个单元格中，对列项目使用div（可能需要更改显示CSS以使其完美工作）。
类似的东西：
<table>
<tr>
<td>
<div>td1</div>
<div>td3</div>
<div>td6</div>
</td>
<td>
<div>td1</div>
<div>td3</div>
<div>td6</div>
</td>
</tr>
</table>
默认情况下，div的显示为换行符，但您可能需要根据要查找的内容将div的显示从默认块更改为其他内容。
希望这会有所帮助。
答案 3 :(得分：0)
我建议您使用flex而不是table元素。
这是一个很好的例子，说明如何在您的情况下使用它：
.container {
display: flex;
flex-wrap: wrap;
width: 220px;
background-color: blue;
justify-content: space-between;
padding: 10px;
}
.element {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}<div class="container">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">5</div>
<div class="element">6</div>
</div>