CODEWITHSUNDEEP
htmlcsshtml-table
Andam
Andam

Reputation: 2167

HTML cell does not combine height when used multiple rowspans

I have a table with basic structure as below. The problem is when I use same rowspan for all the columns the height collapses to one row only.

<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

when some of the columns have rowspans

<table border=1>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

When all the columns have rowspan. This is where the problem appears. Basically the expected result is for the first row to span two rows instead just one

<table border=1>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
    <td rowspan=2>3</td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Upvotes: 2

Views: 299

Answers (1)

Mehdi Navran
Mehdi Navran

Reputation: 64

As Mr Lister mentioned, You might achieve that by styling td elements with rowspan. but instead of using percentage you should use em as unit. td[rowspan='2'] {height:2em;}

That's the way table row height is calculated unless you specify height explicitly

Upvotes: 1

Related Questions