100% largeur cellule de table

J'ai cette disposition de table. Je veux aligner tout le contenu vers la droite. Donc j'utilise une cellule avec width: 100%;. Habituellement, tout semble bon et agréable.
Mais il y a quelque chose que je ne comprends pas. Si le contenu de la cellule, qui a colspan, devient plus grand que la cellule normale dans cette colonne (vous pouvez le tester en cliquant sur Click to test button), il freine la disposition entière.
Cela se produit sur Chrome, Safari 4 et 5, IE8, mais sur Opera, FF et IE7 est OK.100% largeur cellule de table

Des idées?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>TEST</title> 
    <style type="text/css"> 
     table { width: 100%; } 
     table td { border: 1px solid black; white-space: nowrap; } 
     .delimiter { width: 100%; } 
    </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td><label>Row 1</label></td> 
       <td>&nbsp;</td> 
       <td><input type="text" value="Field 1" id="field1" size="25"></td> 
       <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td> 
       <td class="delimiter">&nbsp;</td> 
      </tr> 
      <tr> 
       <td><label>Row 2</label></td> 
       <td>&nbsp;</td> 
       <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td> 
      </tr> 
     </table> 
    </body> 
</html>

Source

2010-06-15 Elvis

-2

normes W3C Utilisez pour être plus enregistrer avec le codage crossbrowser. Beste solution pour javascript code crossbrowser safty est à l'utilisateur jQuery. C'est encore plus pratique pour ce genre d'outils/fonctionnalités.

Source

2010-06-15 08:49:42

Eh bien, je ne peux pas utiliser jQuery, parce que je vais devoir réécrire l'application entière alors :) P.S. Que voulez-vous dire «Utiliser les normes W3C»? – Elvis

jQuery, bien qu'une bibliothèque très populaire et largement mise en œuvre ne soit pas la finalité de la conception frontale. C'est complètement acceptable de choisir de ne pas utiliser la bibliothèque. – ryandlf

Je n'ai pas été surpris lorsque vous avez dit que cela fonctionnait dans certains navigateurs et pas d'autres. Bienvenue dans le monde réel du développement d'une application web. Je ne suis pas allé dans le détail de vérifier pourquoi les navigateurs rafraîchissent leurs mises en page différemment, car j'ai appris que cela peut être un trou noir du temps. Au lieu de cela je l'ai mis en avant la solution suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>TEST</title> 
<style type="text/css"> 
    table { width: 100%; } 
    table td { border: 1px solid black; white-space: nowrap; } 
    .delimiter { width: 100%; } 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td><label>Row 1</label></td> 
      <td>&nbsp;</td> 
      <td class="delimiter"> 
       <table><tr> 
        <td><input type="text" value="Field 1" id="field1" size="25" /></td> 
        <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td> 
        <td class="delimiter">&nbsp;</td> 
       </tr></table> 
      </td> 
     </tr> 
     <tr> 
      <td><label>Row 2</label></td> 
      <td>&nbsp;</td> 
      <td> 
       <table><tr> 
        <td><input type="text" id="field2" value="Field 2" size="25" /></td> 
        <td class="delimiter">&nbsp;</td> 
       </tr></table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Je sais que ce n'est pas la plus jolie solution, mais comme html brut, il fonctionne. Testé dans Chrome et IE10.

Source

2013-04-22 13:43:17 Sav

100% largeur cellule de table

Répondre

Questions connexes