Need to show a text just above particular table headings - html

Question

I have a table to list the vehicles, i need to show one message over the last three table headings only always above the three headings without exceeding the table heading width (total width of three headings).
I have implemented tried:
<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;
}
Now what happens is the width of the text in vechicle_msg_div is not properly aligned and also the width of the text div changes based on the content of any of the td width varies.
I want to display the vechicle_msg_div in same width of last three <th></th> what ever the content's width is..

Answer 1

You can create another table header row and use the the colspan attribute to let its table data cells span multiple columns like this:
<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>
Check out the mdn pages around https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan for more details.