Comment contourner un bogue de rendu HTML Table dans IE 7?

Question

J'ai une table. Certaines cellules couvrent plusieurs colonnes. Certaines cellules couvrent plusieurs lignes et colonnes. Mais une ligne (qui couvre toutes les colonnes mais la plus à droite) crée un artefact. Une partie du texte dans la cellule est répétée par erreur à gauche justifiée sur une nouvelle ligne juste en dessous de la table. Je suis déconcerté.

J'ai essayé le rendu avec et sans "table-layout: fixed;". Même résultat Quand j'ai initialement composé le design en utilisant simplement du HTML et du CSS, ça avait l'air génial. Mais alors je l'ai travaillé dans une page et a dû ajouter plus de colonnes à ma table principale le droit de tenir des boutons. Ces boutons sont répartis en trois groupes, chacun ayant son propre div pour contrôler le flottement et le réenroulement lorsque la fenêtre devient plus étroite. Un div a une autre table à l'intérieur qui regroupe une seule rangée de boutons. J'ai donc une table à l'intérieur de div à l'intérieur de la table externe.

Je préférerais un design plus simple, mais comment? C'est ce que je veux avoir:

................................................................................... 
.         .            . 
. Four rows of data    . Three groups of buttons that can reflow . 
. With several columns   . if window gets narrower     . 
. meticulously layed out,  .            . 
. That should not resize  .            . 
. when window gets narrower  .            . 
................................................................................... 
. One more row of data spanning the whole screen which stays below the buttons . 
................................................................................... 

ce que je faisais mettais les trois divs avec les boutons en haut à droite dans une seule cellule qui a duré quatre lignes. Quelles autres opportunités offre CSS? Les boutons ne sont pas autorisés à chevaucher les données sur la gauche ou à dépasser la ligne de données ci-dessous.

La conception originale avait les divs avec les boutons PAS dans un tableau avec les données, mais quand la fenêtre devient étroite, certains des boutons coulent de sorte qu'ils vont sous les données, ce qui semble mauvais.

Je publierais du HTML réel, sauf qu'il est généré par ASP, énorme, avec beaucoup de style CSS, et la fonctionnalité qui me permet de voir le code HTML final ne fonctionne pas pour le moment. (Sécurité intégrée dans l'application.)

Answer 1

Vous devez utiliser une table? Je voudrais créer un conteneur div unique avec plusieurs div à l'intérieur pour contenir votre contenu. Vous seriez alors en mesure de positionner vos divs avec des flottants et définir les largeurs que vous aimez. Les éléments ne doivent pas se chevaucher sauf si vous utilisez z-index comme style CSS?

Si vous devez utiliser vos tables, pouvez-vous définir les largeurs de la table?

S'il vous plaît poster une capture d'écran si vous le pouvez.