Log output

Question

I would like to create my table to work as follows:

I tried the following code, but it does not work:

<section class="signa-table-section clearfix">
   <div class="container">
      <div class="row">
         <div class="col-lg">
            <table class="table table-responsive table-bordered">
               <thead>
                  <tr>
                     <th>Entry</th>
                     <th>Sl</th>
                     <th colspan="3">Tp</th>
                     <th>Tp</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
                  <tr>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                     <td>Mark</td>
                     <td>Otto</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</section>

Answer 1

Replace inside <thead>with:

<tr>
   <th rowspan="2">Entry</th>
   <th rowspan="2">Sl</th>
   <th colspan="3">Tp</th>
</tr>
<tr>
   <th>Tp</th>
   <th>Tp</th>
   <th>Tp</th>
</tr>

Answer 2

To achieve the desired separation inside your table head, you basically need to create a new table inside the head and split it.

Your <th>will look like this:

<th colspan="3" class="custom-header">
    <table class="table table-responsive">
        <thead>
            <tr>
                <th colspan="3" class="last">Tp</th>
            </tr>
            <tr>
                <th>Tp1</th>
                <th>Tp2</th>
                <th class="last">Tp3</th>
            </tr>
        </thead>
    </table>
</th>

Then you need to play around with CSS until the result looks right, you want to change the margin, padding, border and width. Here is the codepen with the proposed solution.