Largeur de cellule fixe

Question

Largeur de cellule fixe

Demandé el 15 de Novembre, 2010: Quand la question a-t-elle été
160815 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Beaucoup de gens utilisent encore des tableaux de commandes de mise en page, de données, etc. - un exemple de ceci est le populaire jqGrid. Cependant, il y a quelque chose de magique qui se passe que je ne peux pas semblent sonder (ses tables pour pleurer à haute voix, la quantité de magie pouvait-il y avoir?)

Comment est-il possible de définir un tableau de la largeur de la colonne et l'ont obéi comme jqGrid n'!? Si j'essaie de reproduire ce, même si j'ai mis tous <td style='width: 20px'>, dès lors que le contenu de l'un de ces cellules est supérieure à 20px, la cellule se développe!

Des idées ou des idées?

Demandé el 15 de Novembre, 2010 par Jimbo

Answer 1

4 Réponses

Answer 2

275voto

hunter Points 33850

Vous pouvez essayer d' utiliser le <col> tag gérer le style de table pour toutes les lignes , mais vous devrez régler le table-layout:fixed style sur le <table> ou les tables classe css et définir le style overflow pour les cellules

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

 <table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

et ceci soit votre CSS

 table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Répondu el 15 de Novembre, 2010 par hunter (33850 Points )

Answer 3

108voto

totymedli Points 4228

Maintenant en HTML5/CSS3 nous avons la meilleure solution pour le problème. À mon avis, c'purement CSS solution est recommandé:

JsFiddle pour cela:

<html>
   <head>
      <style>
         table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
         table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
         table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
         table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
         table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
      </style>
   </head>
   <body>
      <table class="fixed">
         <tr>
            <td>Veryverylongtext</td>
            <td>Actuallythistextismuchlongeeeeeer</td>
            <td>We should use spaces tooooooooooooo</td>
         </tr>
      </table>
   </body>
</html>

Vous avez besoin de mettre la table de l' width même dans haunter de la solution. Sinon ça ne marche pas.
Aussi une nouvelle CSS3 fonctionnalité qui vsync suggéré est: word-break:break-all;. Cela brise les mots sans les espaces à plusieurs lignes. Modifiez le code comme ceci:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Résultat Final

Rendered table

Répondu el 28 de Juin, 2013 par totymedli (4228 Points )

Answer 4

17voto

ajreal Points 31456

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Répondu el 15 de Novembre, 2010 par ajreal (31456 Points )

Answer 5

2voto

user1993774 Points 11

 table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

Répondu el 19 de Janvier, 2013 par user1993774 (11 Points )

Largeur de cellule fixe

Réponses

JsFiddle pour cela:

Résultat Final

Questions en vedette

Top Tags

Prograide.com

Powered by:

Largeur de cellule fixe

Réponses

JsFiddle pour cela:

Résultat Final

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: