Table de verrouillage des cellules pour leur taille par défaut quel que soit le contenu

Si j'ai

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

et

table
    { width: 100%; height: 100%; }

Chaque cellule prend une égale au quart de la table, et la table s'étend pour s'adapter à la fenêtre.

Comment puis-je éviter ces cellules de se redimensionner pour s'adapter le contenu à l'intérieur des cellules (bien que toujours côté de la table contenant)?

OriginalL'auteur Nick | 2011-01-11

  1. 16

    Vous pouvez essayer de table-layout:fixed; - ce qui définit la mise en page d'une certaine taille fixe (spécifié dans le CSS) et ignore le contenu des cellules, de sorte que la largeur de la cellule ne change jamais. Je ne suis pas sûr si cela affecte la disposition verticale ou pas.

    Plus d'infos sur w3schools.

    Vous avez raison, horizontal, largeurs, mais pas à la verticale. J'ai envie de CSS est inutile pour les choses les plus simples. Je suis juste essayer de faire un calendrier!
    Toute solution à la verticale?
    Je pense que ma réponse à cette question fonctionne pour la verticale.

    OriginalL'auteur whostolemyhat

  2. 2

    Vous pouvez essayer de sélectionner une seule cellule à mâcher tout l'espace et définir à 100% de la hauteur et de la largeur:

    <table>
    <tr>
        <td>Hi There.</td>
        <td>x</td>
    </tr>
    <tr>
        <td>Here is some text.</td>
        <td class="space-hog"></td>
    </tr>
</table>

    et un peu de CSS:

    table {
    width: 100%;
    height: 100%;
}
td {
    white-space: nowrap;
}
td.space-hog {
    width: 100%;
    height: 100%;
}

    Et un live exemple. Vous devez être prudent pour éviter les mauvaises retour à la ligne lorsque .space-hog fait sa chose, d'où le white-space: nowrap. Si vous mettez la .space-hog dans la dernière ligne, alors vous pouvez éviter de pousser les parties intéressantes de down.

    Je n'essaie pas d'obtenir une cellule à occuper tout l'espace -- je veux cellulaire jamais être égale à la largeur et la hauteur quel que soit leur contenu.
    Bon, il n'était pas clair pour moi. Je ne pense pas qu'il y est une façon de dire "fais toutes ces choses de la même taille" dans le CSS, vous avez à dire "faire toutes ces choses Wpx large et Hpx haut" et de calculer les dimensions vous-même sur le serveur ou en JavaScript. Peut-être fournir plus de contexte dans la question et quelqu'un pourrait venir avec une toute nouvelle approche qui évite le tableau de dimensionnement kludges entièrement.

    OriginalL'auteur mu is too short

  3. 1

    td{ width:50%; } fonctionnera jusqu'à ce que le tableau devient assez petit.

    Que faire si je ne sais pas le nombre de lignes ou de colonnes à l'avance? J'ai été en utilisant Javascript pour donner à chaque cellule d'un pourcentage de la largeur et de la hauteur, mais ne peut plus le faire.
    Je ne peux pas penser à un pur HTML/CSS solution, vous aurez probablement besoin de Javascript. Vous pouvez essayer de jouer avec le CSS propriété overflow.

    OriginalL'auteur Jake

  4. 1

    Vous pouvez le faire en utilisant position: absolute sur le contenu de chaque cellule du tableau: parce que si vous le faites alors que la taille du contenu n'affecte pas la taille de la cellule.

    Pour ce faire, vous devez alors également la position de la table de cellules (de sorte que le positionnement absolu du contenu est relatif à la cellule du tableau) -- et/ou, à l'appui de Firefox, position à un supplément de div dans les cellules du tableau depuis Firefox ne permet pas d'appliquer de la position pour les cellules elles-mêmes.

    Par exemple, je suis en utilisant ce code HTML:

    <td><div class="bigimg"><img src="...."/></div></td>

    Avec le code CSS suivant, de sorte que la taille de l'image n'affecte pas la taille de la cellule qui le contient:

    div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}

    J'ai mis le height et width de div.bigimg à 100% pour correspondre à la taille de la td qui le contient, parce que je suis à l'aide de JavaScript pour redimensionner les images au moment de l'exécution pour les adapter à leurs conteneurs, qui sont les div.bigimg.

    Est-il une explication à ce qui serait nécessaire? un tableau 3x3 semble redimensionner même si l'image s'adapte à l'intérieur de la cellule du tableau!
    Je ne comprends pas votre commentaire/question. Vous pourriez peut-être poster une nouvelle question.

    OriginalL'auteur ChrisW

  5. 1

    J'ai réussi à le faire sans fixe de la table.
    La cellule css:

    .dataCell {
  display: table-cell;
  padding: 2px 15px 2px 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  max-width: 1px;
}

    OriginalL'auteur Galvani

  6. 1

    Vous pouvez également verrouiller les cellules à un pourcentage, afin de maintenir la réactivité, par exemple:

      td:first-child, th:first-child {
    width: 20%;
  }
  //assuming you have 8 remaining columns (20 + 10*8 = 100%)
  td:not(:first-child), th:not(:first-child) {
    width: 10%;
  }

    OriginalL'auteur Vinnie James

  7. 0

    Quelque chose le long des lignes de l'aide overflow:hidden; peut-être?

    OriginalL'auteur nchpmn

  8. 0

    Ajouter table-layout:fixed; à la table du style.

    Si vous remarquez que cela permet de fixer la largeur mais pas la hauteur, c'est parce qu'il peut toujours exister une sorte de rembourrage à l'intérieur de chaque td cellule. Ajouter padding:0px; à la td style.

    OriginalL'auteur Amy Liu