RayZ RayZ - 1 month ago 11
CSS Question

Incorrect table rendering

<table width="300" height=100 cellspacing="1" cellpadding="2" border="1">
<tbody>
<tr>
<td width="150" colspan="2" ></td>
<td width="75" colspan="1" ></td>
</tr>
<tr>
<td width="75" colspan="1"></td>
<td width="150" colspan="2"></td>
</tr>
<tr>
<td width="75" colspan="1" ></td>
<td width="150" colspan="2" ></td>
</tr>
<tr>
<td width="75" colspan="1" ></td>
<td width="150" colspan="2" ></td>
</tr>
</tbody>
</table>


This table should looks like



but in real



Is there any solutions?

Answer

Four things:

  1. colspan="1" is not required. It is the default value;
  2. You should favour CSS. What you're doing is deprecated;
  3. You don't need a width on every cell. Just the first one (in each column) is sufficient; and
  4. Use the <col> element to explicitly layout your columns.

For example:

#mytable { width: 300px; height: 100px; border: border-collapse: collapse; }
#mytable td { border: 1px solid none; }

with:

<table id="mytable">
<col style="width: 75px;">
<col style="width: 75px;">
<col style="width: 75px;">
<tbody>
  <tr>
   <td colspan="2">...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td colspan="2">...</td>
  </tr>
  <tr>
   <td colspan="2">...</td>
   <td>...</td>
  </tr>
  <tr>
   <td>...</td>
   <td colspan="2">...</td>
  </tr>
</tbody>
</table>
Comments