blsn blsn - 13 days ago 8
CSS Question

Different width for table rows

I try to split the middle row and keep the upper row and bottom as-is.



<table border="1" width="500">
<tbody>
<tr bgcolor="red">
<td width="10%">&nbsp;</td>
<td width="80%">&nbsp;</td>
<td width="10%">&nbsp;</td>
</tr>
<tr bgcolor="green">
<td width="50%" colspan="2">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr bgcolor="blue">
<td colspan="3">&nbsp;</td>
</tr>
</tbody>
</table>





How do I split the middle row into two equal columns, using one table tag?

Answer

Add more colspan:

table {
  width: 500px;
  table-layout: fixed;
  border: 1px outset;
}
tr:nth-child(1) > td:nth-child(2) {
  width: 80%;
}
td::after {
  content: '\200B'; /* Insert zero-width space */
}
table { border: 1px outset; }
td    { border: 1px inset;  }
tr:nth-child(1) { background: red;   }
tr:nth-child(2) { background: green; }
tr:nth-child(3) { background: blue;  }
<table>
  <tbody>
    <tr>
      <td></td>
      <td colspan="2"></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td colspan="4"></td>
    </tr>
  </tbody>
</table>