Home > Enterprise >  Need to show a text just above particular table headings
Need to show a text just above particular table headings

Time:03-23

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 >
    <h2>Vehicle List</h2><br>
    <h2>To be Sold</h2>
    <div >
      <div   id="vechicle_msg_div">Documents pending for these 
         vehicles</div>
          <table >
              <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..

CodePudding user response:

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.

  • Related