如何合并两个div，并将表头放在表中的每一行

Question

我正在为web应用程序创建布局，但我希望左右容器统一。我不知道如何合并这两个div。请帮帮我。

我想在每一行中添加列标题，但我不知道如何做到。我用jQuery静态添加行。

这是我的代码：

<div class="row" >
<div class="col-md-8" >
<table class="table table-striped" id="our_table"  >
<tr >
<th >Vehicle
</th >
<th >Type
</th >
<th >Date
</th >
<th >Route</th>

</tr >
<tr ng-repeat="person in filteredPersons = (persons | filter:sensitiveSearch | orderBy:order)"
ng-style="{
'background-color': $index == selectedIndex ? '#E9CF30' : ''
}"
ng-click="selectPerson(person, $index)" >
<td >{{ person.vehicle }}</td >
<td >{{ person.type }}</td >
<td >{{ person.date  }}</td >
<td >{{ person.route  }}</td >
</tr >
<tr ng-show="filteredPersons.length == 0">
<td colspan="4">
<div class="alert alert-info">
<p class="text-center">No results found for search term '{{ search }}'</p>
</div>
</td>
</tr>

</table >
</div >
<div class="col-md-4 p-0 " >
<div class="panel panel-default"  >
<div class="panel-heading" ></div >
<div class="panel-body" >
<dl >
<dt >Captain</dt >
<dd >{{selectedPerson.captain}}</dd >
<dt >Operation</dt >
<dd >{{selectedPerson.operation}}</dd >
<dt >Type(s)</dt >
<dd >{{selectedPerson.type}}</dd >

</dl >
<div class="dropdown" >
<button
style="width: 100%;font-family: 'Open Sans';
font-size: 19px;
font-weight: bold;
color: #172C49;"
class="btn btn-default dropdown-toggle btn-md" type="button" data-toggle="dropdown">TAKE ACTION
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">MARK AS SEEN</a></li>
<li><a href="#">CREATE AN AD-HOC TASK</a></li>
<li><a href="#">MAKE A COMMENT</a></li>
</ul>
</div>
<img class="img-responsive" id="myImg" src="picture.png" alt="Picture">

为了更清楚地理解：前端

这就是我想要的：前端2

Answer 1

如果您使用bootstrap v4，您可以在行上添加一个no-gutters类，如果没有，您可以添加一个新类来删除列中的默认填充，如下所示：

.padding-0{
padding-right:0;
padding-left:0;
}

在3.4版本中，您还可以将一个类添加到名为row-no-gutters的行中