需要在特定表格标题上方显示文本

Question

我有一个表格来列出车辆，我需要在最后三个表格标题上显示一条消息，仅始终在三个标题上方，而不超过表格标题宽度(三个标题的总宽度(。

我已经实现了尝试：

<div class="col-md-12">
<h2>Vehicle List</h2><br>
<h2>To be Sold</h2>
<div class="table-responsive">
<div  class=" col-md-6 alert-warning" id="vechicle_msg_div">Documents pending for these 
vehicles</div>
<table class="table table-bg  m-t-sm">
<thead>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
<tbody *ngIf="vehicleList != null">
<td>{{ vehicleList.length +i }}</td>
<td>{{ list.ownername }}</td>
<td>{{ list.place }}</td>
<td>{{ list.name }}</td>
<td>{{ list.brand }}</td>
<td>{{ list.color }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

#vechicle_msg_div {
position: relative;
top: 1px;
padding: 10px;
width:auto;
float: right;
text-align: center;
border: 1px dashed;
}

现在发生的情况是vechicle_msg_div中文本的宽度没有正确对齐，而且文本div的宽度也会根据任何td宽度的内容而变化
我想以最后三个<th></th>的相同宽度显示vechicle_msg_div，内容的宽度是多少。

Answer 1

您可以创建另一个表头行，并使用colspan属性使其表数据单元格跨多列，如下所示：

<table>
<thead>
<tr>
<td colspan="3"></td>
<td colspan="3">Documents pending for these vehicles</td>
</tr>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
</table>

查看周围的mdn页面https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan了解更多详细信息。