Need to show a text just above particular table headings

Issue

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..

Solution

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.

Answered By - lupz