Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72443

Is there way to achieve inside the table header having a three table data?

$
0
0

I have a problem to achieve a table header which in some parts contains a second row of header elements, where three th cells belong to one main header cell above them. I don't know if is it possible to create an html table like this. To what I mean, I am providing my sample code and an illustration.

Goal:

my goal

Please take a look the hyphen line, that table i want to achieve to my table on my html. so right now i have the output of this. please see the second illustration.

my html table

Here is my html code:

<table class="table table-bordered">

  <thead>
    <tr style="font-size:13px; text-align: center;">
      <th>1600</th>
      <th colspan="2">P1W1</th>
      <th colspan="2">TGT</th>
      <th colspan="2">LY</th>
      <th colspan="3" scope="colgroup">Variance Vs Target</th>
      <th colspan="3" scope="colgroup">Variance Vs 2018</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-size:12px;">

      <td style="">ADS</td>

      <td style="text-align: right;">23,635</td>
      <td></td>

      <td style="text-align: right;">21,676</td>
      <td></td>

      <td style="text-align: right;">20,790</td>
      <td></td>

      <td style="text-align: right;">1,959</td>
      <td style="text-align: right;">9.0%</td>
      <td></td>

      <td style="text-align: right;">2,845</td>
      <td style="text-align: right;">13.7%</td>
      <td></td>

    </tr>

  </tbody>
</table>

Thank you..


Viewing all articles
Browse latest Browse all 72443

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>