largeurs td, ne fonctionne pas?


93

J'ai donc ce code ici:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

avec le CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Cela fonctionne bien sur mon navigateur et je l'ai testé dans tous les navigateurs Mac et PC, mais quelqu'un se plaint que le tdavec le widthde 200 continue de changer de largeur. Je n'ai aucune idée de quoi il parle. Est-ce que quelqu'un sait pourquoi il ou elle voit le changement de largeur sur le td?


Alors, comment pouvons-nous aider lorsque nous avons encore moins d'idée de la nature de la plainte? Nous ne pouvons même pas tester la page réelle et nous n'avons aucune information sur la personne et son environnement de navigation.
Jukka K. Korpela

Réponses:


122

Ça devrait être:

<td width="200">

ou

<td style="width: 200px">

Notez que si votre cellule contient du contenu qui ne rentre pas dans le 200px (comme somelongwordwithoutanyspaces), la cellule sera néanmoins étirée, sauf si votre CSS contient table-layout: fixedpour le tableau.

ÉDITER

Comme l'a noté kristina childs dans sa réponse, vous devriez éviter à la fois l' widthattribut et l'utilisation de CSS en ligne (avec l' styleattribut). C'est une bonne pratique de séparer le plus possible le style et la structure.


Merci bfavaretto ... essayant ça maintenant
user979331

47
devrait être la table<table style="table-layout:fixed;">
user979331

3
@ user1193385, Oui, c'est tout. Mais évitez d'utiliser le CSS en ligne si possible.
bfavaretto

4
Le css en ligne est une mauvaise idée à moins que vous n'en ayez vraiment besoin à un seul endroit. De plus, la largeur de td a été amortie pendant un certain temps. voir réponse ci
kristina childs

2
@kristinachilds Je suis d'accord. J'ai utilisé le css en ligne sur mon exemple, donc je n'aurais pas besoin de me diviser en deux blocs de code pour HTML et CSS. Ajout d'un commentaire ci-dessus indiquant à l'OP d'éviter les CSS en ligne. À propos de l'attribut width, techniquement, il n'est pas obsolète (puisque la spécification HTML5 est toujours un brouillon de travail), mais vous avez raison, cela devrait être évité. Je modifierai ma réponse avec une note à ce sujet.
bfavaretto

30

La largeur et / ou la hauteur des tables ne sont plus standard; comme Ianzz le dit, ils sont obsolètes. Au lieu de cela, la meilleure façon de le faire est d'avoir un élément de bloc à l'intérieur de votre cellule de tableau qui maintiendra la cellule ouverte à la taille souhaitée:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

10
Malheureusement, la technologie du courrier électronique a de nombreuses années de retard sur les spécifications HTML actuelles, et dans ce cas, les tableaux et le CSS en ligne sont malheureusement inévitables.
MikeTheLiar

2
Personne ne parlait de courriels html, c'était pour la navigation Web de base sur le bureau. Mais oui, pour les e-mails, les tableaux et les css en ligne sont le seul moyen de les construire. Merci, Microsoft ...
kristina childs

3
Je n'évoque le courrier électronique que parce que c'est ce qui m'a amené ici; J'avais ce même problème avec le courrier électronique.
MikeTheLiar

20
 <table style="table-layout:fixed;">

Cela forcera la largeur stylisée <td>. Si le texte le remplit, il chevauchera l'autre <td>texte. Essayez donc d'utiliser des requêtes multimédias.


1
Sur mon cas d'utilisation, c'était aussi important que la réponse de
bfavaretto

Dans mon cas (Firefox 70.0), table-layout:fixedj'ai attribué des largeurs fixes aux colonnes, donc je ne peux widthplus changer (avec jquery).
Jose Manuel Abarca Rodríguez

7

Vous ne pouvez pas spécifier des unités dans width/ heightattributs d'une table; ils sont toujours en pixels, mais vous ne devriez pas les utiliser du tout car ils sont obsolètes.



7

Vous pouvez utiliser dans la <td>balise css:display:inline-block

Comme: <td style="display:inline-block">


2

Essayez d'utiliser

word-wrap: break-word;

espère cette aide




1

Utilisation

<table style="table-layout:fixed;">

Cela forcera la table à définir une largeur de 100%, puis utilisez ce code

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(l'ID de la table est dataTable et a 3 colonnes) pour spécifier la longueur de chaque cellule


0

Notez que l'ajustement de la largeur d'une colonne dans la tête affectera l'ensemble du tableau

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

Dans mon cas, la largeur sur le thead> tr remplaçait directement la largeur sur table> tr> td.


0

J'ai essayé avec de nombreuses solutions mais cela n'a pas fonctionné pour moi, alors j'ai essayé flex avec la table et cela a bien fonctionné pour moi avec toutes les fonctionnalités de table telles que la réduction des bordures et ainsi de suite, seul le changement est la propriété d'affichage

C'était mon exigence HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Mon CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

0

Ce problème est assez facilement résolu en utilisant min-widthet max-widthdans une règle css.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Cela forcera la première colonne à avoir une largeur de 80 pixels. Habituellement, je n'utilise que max-width sans min-width pour régner dans le texte qui est très parfois trop long à partir de la création d'un tableau qui a une colonne super large qui est principalement vide. La question du PO portait cependant sur la définition d'une largeur fixe, d'où les deux règles ensemble. Sur de nombreux navigateurswidth:80px; CSS est ignoré pour les colonnes de table. La définition de la largeur dans le HTML fonctionne, mais ce n'est pas la façon dont vous devriez faire les choses.

Je recommanderais d'utiliser des règles de largeur minimale et maximale, et de ne pas les définir de la même manière, mais plutôt de définir une plage. De cette façon, le tableau peut faire son travail, mais vous pouvez lui donner des conseils sur ce qu'il faut faire avec un contenu trop long.

Si je veux empêcher le texte de s'habiller et d'augmenter la hauteur d'une ligne - tout en permettant à un utilisateur de voir le texte intégral, j'utilise white-space: nowrap;sur la règle principale, puis j'applique une règle de survol qui supprime les règles de largeur et de nowrap afin que l'utilisateur puisse voir le contenu complet lorsqu'il passe la souris dessus. Quelque chose comme ça:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Cela dépend exactement de ce que vous essayez d'accomplir. J'espère que ça aidera quelqu'un. PS En passant, pour iOS, il existe un correctif pour le survol qui ne fonctionne pas - voir CSS Hover ne fonctionne pas sur iOS Safari et Chrome

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.