Table complexe rowspan et colspan

Question

Peut-on reproduire arbitrairement des cellules fusionnées et non fusionnées dans Excel dans un tableau HTML en utilisant correctement rowspan et colspan ou y a-t-il des limitations? J'ai seen quelques arrangements assez complexes résolus par ici, donc j'espère.

J'ai une grille de 8 lignes et 5 colonnes qui est fusionnée en 16 cellules distinctes, représentant l'en-tête et le contenu de chacune des 8 sections, étiquetées A-H.

Voici l'arrangement que je suis en train de réaliser, comme il semble dans Excel (cellules B2: F9):

Voici comment je conceptualise le code HTML couvre:

Le balisage suivant est ma meilleure approximation: Notez que les divs rouges sont destinés à représenter les tailles arbitraires du contenu d'une section.

JSFiddle

<style> 
    table { 
     border-spacing: 0; 
     width: 1500px; 
    } 

     table > tbody > tr > td { 
      border: 1px solid black; 
      vertical-align: top; 
      text-align: center; 
     } 

      table > tbody > tr > td > div { 
       margin: 0 auto; 
       border: 1px red solid; 
      } 
</style> 
<table> 
    <tr id="Row1"> 
     <td>A 
     </td> 
     <td colspan="2">B 
     </td> 
     <td colspan="2">C 
     </td> 
    </tr> 
    <tr id="Row2"> 
     <td> 
      <div style="width: 340px; height: 100px;" /> 
     </td> 
     <td colspan="2" rowspan="3"> 
      <div style="width: 450px; height: 200px" /> 
     </td> 
     <td colspan="2" rowspan="5"> 
      <div style="width: 400px; height: 100px" /> 
     </td> 
    </tr> 
    <tr id="Row3"> 
     <td>D 
     </td> 
    </tr> 
    <tr id="Row4"> 
     <td rowspan="5"> 
      <div style="width: 340px; height: 100px;" /> 
     </td> 
    </tr> 
    <tr id="Row5"> 
     <td colspan="2">E 
     </td> 
    </tr> 
    <tr id="Row6"> 
     <td colspan="2"> 
      <div style="width: 450px; height: 200px;" /> 
     </td> 
    </tr> 
    <tr id="Row7"> 
     <td>F 
     </td> 
     <td colspan="2">G 
     </td> 
     <td>H 
     </td> 
    </tr> 
    <tr id="Row8"> 
     <td> 
      <div style="width: 330px; height: 100px" /> 
     </td> 
     <td valign="top" colspan="2"> 
      <div style="width: 200px; height: 100px" /> 
     </td> 
     <td valign="top"> 
      <div style="width: 200px; height: 100px" /> 
     </td> 
    </tr> 
</table> 

Il génère ceci:

J'ai deux problèmes avec ma solution:

• Le bord inférieur de tête 'D' (ligne 3) semble être lié au bord supérieur de l'en-tête 'E' (ligne 5), et l'en-tête 'D' est trop grand. Au lieu de cela, je pense que la cellule de contenu sous 'A' devrait rétrécir pour s'adapter à la div, en attirant l'en-tête 'D' vers le haut.
• Je ne peux pas expliquer pourquoi plus de la moitié des cellules (B, C, E, F, H) sont beaucoup trop large pour leur contenu . La table est tellement plus large que ce dont j'ai besoin - je m'attendrais à ce que plus de cellules correspondent à leur contenu comme le fait G.

Le rendu est cohérent entre les navigateurs. Ai-je fait une erreur avec mes travées, ou n'est-ce pas réalisable pour une raison quelconque?

Answer 1

À l'heure actuelle, vous laissez le navigateur interpréter la largeur et la hauteur de chaque cellule de la table. Vous devez définir les attributs de largeur et de hauteur pour chaque cellule afin de résoudre vos problèmes.

<table> 
     <tr id="Row1"> 
      <td width="340">A 
      </td> 
      <td colspan="2" width="450">B 
      </td> 
      <td colspan="2" width="450">C 
      </td> 
     </tr> 
     <tr id="Row2"> 
      <td width="340" height="100"> 
       <div style="width: 340px; height: 100px;" /> 
      </td> 
      <td colspan="2" rowspan="3" width="450"> 
       <div style="width: 450px; height: 200px" /> 
      </td> 
      <td colspan="2" rowspan="5" width="400"> 
       <div style="width: 400px; height: 100px" /> 
      </td> 
     </tr> 
     <tr id="Row3"> 
      <td>D 
      </td> 
     </tr> 
     <tr id="Row4"> 
      <td rowspan="5" width="340"> 
       <div style="width: 340px; height: 100px;" /> 
      </td> 
     </tr> 
     <tr id="Row5"> 
      <td colspan="2" width="450">E 
      </td> 
     </tr> 
     <tr id="Row6"> 
      <td colspan="2" width="450"> 
       <div style="width: 450px; height: 200px;" /> 
      </td> 
     </tr> 
     <tr id="Row7"> 
      <td>F 
      </td> 
      <td colspan="2">G 
      </td> 
      <td>H 
      </td> 
     </tr> 
     <tr id="Row8"> 
      <td width="350"> 
       <div style="width: 350px; height: 100px" /> 
      </td> 
      <td valign="top" colspan="2" width="200"> 
       <div style="width: 200px; height: 100px" /> 
      </td> 
      <td valign="top" width="300"> 
       <div style="width: 300px; height: 100px" /> 
      </td> 
     </tr> 
    </table> 

Voir mise à jour fiddle.