CODEWITHSUNDEEP
javascripthtmlcss
Nikhil
Nikhil

Reputation: 21

Col Span Split For First td cell with table header

<table border="1">
  <tr>
    <th scope="col" colspan="1">Header</th>
    <th scope="col" colspan="2" >Header</th>
    <th scope="col" colspan="1">Header</th>
  </tr>
  <tr>

    <td colspan="2">Col 3</td>
    <td  colspan="1">Col 1</td>
    <td  colspan="1">Col 2</td>
  </tr>
</table>

From the above code i need to share first td with two th cells. how it is possible to share the first td cell to share with th if td colspan is greater than th colspan. I got error in first td cell only while sharing with two th headers?

Upvotes: 0

Views: 538

Answers (2)

Naman Kheterpal
Naman Kheterpal

Reputation: 1840

The width of the td normally depends on the data in nth td of all rows.

   <table border="1">
  <tr>
    <th>Month</th>
    <th colspan="2">Savings</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
    <td>$100</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$8000</td>
  </tr>
  <tr>
    <td colspan="4">Sum: $180</td>
  </tr>
</table>

Upvotes: 0

sunwoo
sunwoo

Reputation: 148

Try This : 

<table border="1">
  <colgroup>
    <col style="width:25%;" />
    <col style="width:25%;" />
    <col style="width:25%;" />
    <col style="width:25%;" />
  </colgroup>
  <tr>
    <th scope="col" colspan="1">Header</th>
    <th scope="col" colspan="2" >Header</th>
    <th scope="col" colspan="1">Header</th>
  </tr>
  <tr>

    <td colspan="2">Col 3</td>
    <td  colspan="1">Col 1</td>
    <td  colspan="1">Col 2</td>
  </tr>
</table>

Upvotes: 1

Related Questions