web-dev-qa-db-fra.com

Réglage de la largeur des cellules du tableau

Prenons 4 colonnes de table - ID, Text, Date, Action. Dans mon cas, la table a toujours une largeur constante - dans l'exemple 960px.

Comment puis-je créer un tableau tel que:

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

Comme on peut le constater, ID, Date et Action adaptent leur largeur au contenu, Text est aussi long que possible .... 

Est-il possible de le faire sans définir une largeur spécifique de colonnes? Lorsque ID = 123 ou Date = novembre 2011, les colonnes devraient automatiquement être plus larges ...

htmlcsscss-tables
9
Mr Sooul

En utilisant une largeur 100% sur le td large et une largeur fixe pour le tableau avec white-space:nowrap, vous pouvez le faire:

Démo

HTML

<table>
    <tr>
        <td>1</td>
        <td width="100%">Some text... </td>
        <td>May 2011</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="100%">Another text... </td>
        <td>April 2011</td>
        <td>Edit</td>
    </tr>
</table>


CSS

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}
17
Joseph Marikle

en gros, c'est juste comme ceci: http://jsfiddle.net/49W5A/ - vous devez définir la largeur de cellule à quelque chose de petit (comme 1px) pour les rendre aussi petits que possible.

mais comme vous le verrez, il y a un problème avec les champs de date qui effectuent un retour à la ligne. pour éviter cela, ajoutez simplement white-space: nowrap; à votre champ de texte: http://jsfiddle.net/ZXu7U/

exemple de travail:

<style type="text/css">
.table{
    width:500px;
    border: 1px solid #ccc;
}
.table td{
    border: 1px solid #ccc;
}
.id, .date, .action{
    width:1px;
}
.date{
    white-space: nowrap;
}
</style>
<table class="table">
    <tr>
        <td class="id">1</td>
        <td class="text">Some Text...</td>
        <td class="date">May 2011</td>
        <td class="action">Edit</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="text">Another Text...</td>
        <td class="date">April 2011</td>
        <td class="action">Edit</td>
    </tr>
</table>
4
oezi

Le meilleur conseil que je puisse vous faire est de ne pas toucher les largeurs du tableau, le tableau est automatiquement mis en forme de manière à ce que toutes les cellules soient les meilleures.

Toutefois, si vous souhaitez passer à travers, j'utiliserais width: 1px; sur les cellules qui doivent être ajustées (une de chaque colonne suffit). Utilisez également white-space: nowrap sur toutes les cellules. cela fera en sorte que les lignes ne se cassent pas.

4
Madara Uchiha

Essaye ça:

.id, .date, .action correspond aux cellules de la table (td).

CSS: 

.id, .date, .action {
   width: 1em;
}

Cela a fonctionné pour moi.

La largeur: 1em ne coupera pas le texte mais forcera la largeur au minimum.

2
robcaa

Le meilleur moyen que j'ai trouvé pour définir la largeur des colonnes d'un tableau est d'utiliser un tête de table (qui peut être vide) et appliquez des largeurs relatives pour chaque cellule de la tête de tableau. Les largeurs de toutes les cellules du corps du tableau seront conformes à la largeur de leur tête de colonne. Exemple:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Voir résultat

Alternativement, vous pouvez utiliser colgroup comme suggéré ici .

0
eicksl