html largeur de la colonne de la table, largeur fixe au moment de la création de la page

S'il existe un moyen facile de fixer la largeur des colonnes de la table html au moment où la page est rendue. Je ne veux pas spécifier le pixel ou la largeur en pourcentage des colonnes dans mon code. Cependant, une fois la page créée et les largeurs déterminées en fonction du contenu initial de la table, je ne veux pas que les largeurs changent, même si la taille du contenu de la cellule change. Pour que vous compreniez ce que j'essaie de faire, si j'ai le contenu d'un changement de cellule (de normal à gras par exemple), dites quand je passe la souris sur la ligne, la taille des colonnes va changer. Cela a l'air assez étrange.html largeur de la colonne de la table, largeur fixe au moment de la création de la page

Source

2010-12-06 kralco626

L'une des raisons pour lesquelles vous ne devez pas mettre un texte en gras lors du survol :-) Qu'attendez-vous du texte plus large? Débordement? – RoToRa

sûr. si je peux le mettre à faire cela qui fonctionne. parce que ça ne va pas. il y a beaucoup de place dans la cellule, c'est juste que chaque cellule a différentes quantités de texte, donc quand le texte devient gras, il change les proportions de la taille nécessaire pour chaque cellule, donc la taille change de quelques pixels ... Je pense ... – kralco626

Pour être honnête, je n » Je ne comprends pas la réponse que vous avez donnée à mon commentaire, mais je vais quand même tenter une réponse :-)

Ce dont vous avez peut-être besoin est d'envelopper le contenu de chaque cellule dans un div (ou som e autre élément de bloc) et définissez sa largeur. Cela devrait limiter l'élargissement des cellules, cependant, comme je l'ai laissé entendre dans mon commentaire, le contenu plus large débordera, ce qui ressemble le plus à laide. Cependant, vous ne spécifiez pas vraiment ce que vous voulez que le contenu plus large à faire ...

<style type="text/css"> 
    #the-table td .wrap { 
     overflow: hidden; /* try different values for different effects */ 
    } 
</style> 

<script type="text/javascript"> 
    $(function(){ 
     $('#the-table th, #the-table td').wrapInner(function() { 
      return $("<div/>").css("width", $(this).width() + "px"); 
     }); 
    }); 
</script>

Un exemple concret: http://jsfiddle.net/Vx5Zq/

Remarquez comment la lettre F est coupée sur le vol stationnaire.

Source

2010-12-08 09:32:14 RoToRa

Tout d'abord, je vais essayer de clarifier ma réponse à votre question. Tout ce que je dis, c'est que lorsque le texte n'est pas gras, il y a beaucoup d'espace entre le bord du texte et le bord de la cellule, donc je pense que le texte pourrait devenir GRAS et donc plus grand, sans déborder cellule. Désolé, ma réponse avant était proly pas très utile. Merci :) – kralco626

Merci pour votre réponse, c'est avec défi le sorta que je cherche. Jetez un oeil à ma modification: http://jsfiddle.net/Vx5Zq/1/ Notez comment dans ce cas le texte ne déborde pas. C'est ce que je disais quand le texte ne débordait pas car il y avait beaucoup de place dans les cellules. J'espère que l'exemple vaudra 1000 mots: -P – kralco626

Donc je ne vous garderai pas en suspens, ça marche parfaitement! Merci beaucoup! – kralco626

Je pense que cela devrait faire l'affaire (non vérifié si):

var w = $('#myTable td.leftCol').outerWidth(); 
$('#myTable td.leftCol').css({width: w+'px'});

[EDIT]

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(
      function() { 
       $("table td").each(
        function() { 
         var w = $(this).outerWidth(); 
         alert(w+'px'); 
         w *= 2; 
         $(this).css({width: w+'px'}); 
         alert(w+'px'); 
        } 
       ); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>abc</td> 
      <td>def</td> 
      <td>ghi</td> 
     </tr> 
    </table> 
</body> 
</html>

Source

2010-12-06 11:44:27 mingos

n'a pas fonctionné ... – kralco626

Cela ne va pas aider beaucoup. Les largeurs sur une cellule de table sont fondamentalement traitées comme «min-width». – RoToRa

bien y at-il une largeur maximale que je peux définir? – kralco626

Ajout d'une certaine largeur à vos tds actuelles arrêtera le redimensionnement lorsque le texte va audacieux.

d'abord définir votre table en utilisant css pour fixe rendu:

<style type="text/css"> 
    #mytable{ table-layout: fixed; } 
</style>

vous pouvez ensuite utiliser jquery ajouter 2px de largeur à vos tds comme ceci:

<script type="text/javascript"> 
    $(function(){ 
     $('#mytable td').each(function(){ 
      var $this = $(this) // cache this td 
      // set style to 2px wider 
      $this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 }); 
     }) 
    }); 
</script>

Source

2010-12-06 16:04:33 hitautodestruct

Merci pour votre réponse.Juste un peu confus, pourquoi est-ce que j'ajoute deux px de largeur? J'essaye d'empêcher les cellules de changer de taille. Et le css que vous avez n'empêche pas les cellules de changer de taille non plus – kralco626

Les 2px supplémentaires cimentent la cellule et l'empêchent de se dilater lorsque l'élément devient gras. – hitautodestruct

html largeur de la colonne de la table, largeur fixe au moment de la création de la page

Répondre

Questions connexes