jayant rawat jayant rawat - 1 year ago 49
CSS Question

Align table using rowspan and colspan

Hi i want to create a table using

rowspan
and
colspan
and it is almost done. only the issue is in last
tr
. I don't know why but it is not picking the
rowspan
in last tr



table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}

<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>

</table>





as you can see in result i want to merge the last blank td with a

This is the result i want

enter image description here

Answer Source

You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.

And omit the empty cells from the last row.

Result:

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}
<table style="width:50%">
  <tr>
    <td width="20%" height="75px">1</td>
    <td colspan="4" height="75px">2</td>
  </tr>
  <tr>
    <td rowspan="3" colspan="2">a</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Note that the second column never has content of its own, it is always part of a colspan set. That makes the second column collapse on most if not all browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download