web-dev-qa-db-fra.com

Pourquoi mon tableau HTML ne respecte-t-il pas la largeur de ma colonne CSS?

J'ai un tableau HTML et je veux que les premières colonnes soient assez longues. Je le fais en CSS:

td.longColumn
{ 
     width: 300px;
}

et voici une version simplifiée de mon tableau

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

Pour une raison quelconque, la table semble rendre cette colonne inférieure à 300 px quand il y a beaucoup de colonnes. Je veux fondamentalement qu'il garde cette largeur, peu importe quoi (et juste d'augmenter la barre de défilement horizontale). 

Le conteneur dans lequel se trouve la table n'a pas de type de largeur maximale, je ne peux donc pas comprendre pourquoi on comprime cette colonne au lieu de la respecter.

Y a-t-il un moyen de contourner cette situation, alors quoi qu'il en soit, cette colonne restera d'une certaine largeur?
Voici le CSS du conteneur externe div:

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
htmlcsshtml-table
39
leora

Si vous appliquez la règle table-layout: fixed à la table, vous aurez peut-être plus de chance avec la définition de la largeur de vos cellules de tableau. Cela m'a aidé à résoudre de nombreux problèmes cell-sizing lors de l'utilisation de tableaux. Je ne recommanderais pas d'utiliser uniquement des DIV pour organiser votre contenu si cela convient aux tableaux - d'afficher des données multidimensionnelles.

89
aphax

Je suis d’accord avec Hristo, mais dans certains cas, la table doit être utilisée et la solution à votre problème de table consiste à ajouter une classe en dessous de la classe à la table, puis à modifier toute largeur en td selon vos besoins.

.tables{ border-collapse:collapse; table-layout:fixed;}

J'espère que cela aide pour quelqu'un qui cherche une solution de table!

17
Sagar Ranpise

Donner les deux attributs max-width et min-width devrait fonctionner.

10
umesh

J'ai eu le même problème avec un tas de colonnes où je voulais des colonnes d'espacement… .J'ai l'habitude de faire:

<td style='width: 10px;'>&nbsp;</td>

Mais lorsque la table était plus large que la fenêtre, les espaceurs n’étaient pas vraiment 10px, mais peut-être 5px… .. Et l’utilisation de DIV uniquement sans TABLE n’était pas une option dans mon cas… j’ai donc essayé:

<td><div style='width: 10px;'></div></td>

Et ça a très bien fonctionné! :)

3
Matt Roy

Le meilleur moyen de définir la largeur de votre colonne (td) consiste à utiliser un en-tête de tableau (th). Les en-têtes de table définissent automatiquement la largeur de votre td. Vous devez simplement vous assurer que vos colonnes à l'intérieur de votre tête sont le même nombre de colonnes dans votre corps.

Découvrez-le ici: http://jsfiddle.net/tKAj8/

HTML

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>

CSS

table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }

.short-column { background: yellow; width: 15%; }
.long-column { background: Lime; width: 70%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
2
Oneezy

Utilisez la propriété table-layout et la valeur "fixed" de votre table.

table {
    table-layout: fixed;
    width: 300px; /* your desired width */
}

Après avoir défini toute la largeur de la table, Vous pouvez maintenant définir la largeur en% des td.

td:nth-child(1), td:nth-child(2) {
    width: 15%;
}

Vous pouvez en apprendre plus sur dans ce lien: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

0
Cyan Baltazar

J'ai eu des problèmes avec l'impossibilité de dimensionner les colonnes dans une table table-layout: fixed qui utilisait un colspan. Pour le bénéfice de toute personne rencontrant une variante de ce problème où la suggestion ci-dessus ne fonctionne pas, colgroup a fonctionné pour moi (variation du code de OP):

div {
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
td.longColumn { 
     width: 300px;
}
table {
    border: 1px solid; 
    text-align: center;
    width: 100%;
}
td, tr {
  border: 1px solid; 
}
<div>
    <table>
        <colgroup>
            <col class='longColumn' />
            <col class='longColumn' />
            <col class='longColumn' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan="7">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>

0
Allison