JSFiddle - React, Tailwind, and code Playground

by Khanh Le

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table>
    <thead>
      <tr>
        <th rowspan="2" class="head-1">Invoice #<br />123456</th>
        <th colspan="3" class="head-2-1">
          <div>
            Customer Name: <strong>{{ In Bold }}</strong>`
          </div>
          <div>
            Ship to address: {{ Including City }}
          </div>
        </th>
        <th rowspan="2" colspan="4" class="head-3">
          <div>Shipping Date: 2019-04-
01</div>
          <div>Route: Calgary-North</div>
          <div>Sales Person</div>
        </th>
      </tr>
      <tr>
        <th colspan="3" class="head-2-2" style="height: 50px; text-align: left">Comments<br /></th>
      </tr>
      <tr>
        <th>Quantity<br />Ordered</th>
        <th>Product Description</th>
        <th>Lot Code</th>
        <th>Shippers Remarks</th>
        <th colspan="4">Individual Weights</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-1">1</td>
        <td class="col-2">Product 1</td>
        <td class="col-3">Lot 1</td>
        <td class="col-4"></td>
        <td class="col-5"></td>
        <td class="col-6"></td>
        <td class="col-7"></td>
        <td class="col-8"></td>
      </tr>
    </tbody>
    </table>
</div>


<!-- <div class="container">
  <div class="row">
    <div class="col-sm-2">
      <div class="row">
        <div class="col-sm-12">Invoice #</div>
      </div>
      <div class="row">
        <div class="col-sm-12"></div>
      </div>
      
    </div>
    <div class="col-sm-7">
      <div class="col-sm-12">
        Customer Name
        <br />
        Shipp too address
       </div>
      <div class="col-sm-12">Comments</div>
    </div>
    <div class="col-sm-3">
      <div class="col-sm-12">
        Shipping Date  
      </div>
    </div>
  </div>  
</div>
 -->

CSS

.row > div {
  border: 1px solid grey;
}


table {
  width: 100%;
}

th {
  border: 1px solid grey;
  text-align: center;
  /* vertical-align: top; */
  padding: 5px;
  font-weight: normal;
}

td {
  border: 1px solid grey;
  padding: 5px 5px;
}

/* table.table-bordered > tbody > tr > td {
  width: 25px;
} */

.head-3 {
  text-align: left;
  vertical-align: top;
}

.col-1 {
  width: 75px;
}

.col-3, .col-4 {
  width: 120px;
}

.head-2-2 {
  background: yellow;
}

.head-3 {
  width: 120px;
}