web-dev-qa-db-fra.com

Comment obtenir des cellules de tableau régulièrement espacées?

J'essaie de créer une page avec un certain nombre de tables html statiques dessus.

Que dois-je faire pour qu'ils affichent chaque colonne de la même taille que l'autre colonne du tableau?

Le HTML est le suivant:

<span class="Emphasis">Interest rates</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr>
    <tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr>
</table>
<span>Source: Bt</span><br /><br />

<span class="Emphasis">Stock markets</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr>
    <tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr>
    <tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr>
    <tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr>
    <tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr>
</table>
<span>Source: B</span><br /><br />

Je suis également ouvert à toute suggestion sur la façon de ranger cela, s'il y en a? :-)

edit: Je dois ajouter que les attributs cellpadding et cellspacing sont requis par une tierce partie PDF application de conversion que nous utilisons

htmlcsshtml-table
32
DaveDev

Vous pouvez utiliser CSS. Une façon consiste à définir table-layout à fixed, ce qui empêche la table et ses enfants de dimensionner en fonction de leur contenu. Vous pouvez ensuite définir une largeur fixe sur les éléments td pertinents. Cela devrait faire l'affaire:

table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}
    table.PerformanceTable td.PerformanceCell {
        width: 75px;
    }

Des suggestions pour ranger? Vous n'avez pas besoin des attributs cellpadding ou cellspacing, ni des classes TableRow et TableHeader. Vous pouvez les couvrir en CSS:

table {
    /* cellspacing */
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    /* This covers the th elements */
}
tr {
    /* This covers the tr elements */
}
th, td {
    /* cellpadding */
    padding: 0;
}

Vous devez utiliser un titre (par exemple <h2>) au lieu de <span class="Emphasis"> et un <p> ou une table <caption> au lieu de la source <span>. Vous n'auriez pas besoin du <br> éléments non plus, car vous utiliseriez des éléments de niveau bloc appropriés.

45
Olly Hodgson

Vous pouvez toujours simplement définir la largeur de chaque td à 100%/N colonnes.

<td width="x%"></td>
14
James Van Boxtel

Je concevais un e-mail html et j'ai eu un problème similaire. Mais avoir chaque cellule avec la largeur fixe n'est pas ce que je veux. Je voudrais avoir un espacement égal entre le contenu des colonnes, comme le suivant

| --- quelque chose --- | --- une chose très longue --- | --- courte --- |

Après beaucoup d'essais et d'erreurs, j'ai trouvé ce qui suit

<style>
    .content {padding: 0 20px;}
</style>

table width="400"
    tr
        td
            a.content something
        td 
            a.content a very long thing
        td 
            a.content short

Sujets de préoccupation:

  1. Outlook 2007/2010/2013 ne prend pas en charge le remplissage. Le fait d'avoir la largeur du jeu de tables permettra aux largeurs des colonnes de se régler automatiquement. De cette façon, bien que le contenu n'ait pas un espacement égal. Ils ont au moins un certain espacement entre eux.

  2. Le réglage automatique de la largeur des colonnes du tableau ne donnera pas un espacement égal entre le contenu Le remplissage ajouté pour le contenu forcera l'espacement égal.

2
hexinpeter

Si vous voulez que toutes vos colonnes aient une taille fixe, vous pouvez utiliser CSS:

td.PerformanceCell
{
    width: 100px;
}

Ou mieux, utilisez th.TableHeader (Je ne l'ai pas remarqué la première fois).

1
JYelton

Créez une balise div environnante et définissez-la display: grid dans son attribut de style.

<div style='display: grid; 
            text-align: center;
            background-color: antiquewhite'
>
  <table>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </table>
</div>

La propriété text-align est définie uniquement pour montrer que le texte dans les cellules du tableau normal en est affecté, même s'il est défini sur le div environnant. La même chose avec la couleur de fond, mais il est difficile de dire quel élément contient réellement la couleur de fond.

0
user3798299

Dans votre fichier CSS:

.TableHeader { width: 100px; }

Cela définira toutes les balises td sous chaque en-tête à 100 pixels. Vous pouvez également ajouter une définition de largeur (dans le balisage) à chaque balise th individuelle, mais la solution ci-dessus serait plus simple.

0
ground5hark

Je suis également ouvert à toute suggestion sur la façon de ranger cela, s'il y en a? :-)

Eh bien, vous ne pouviez pas utiliser l'élément span, pour des raisons sémantiques. Et vous n'avez pas besoin de définir la classe PerformanceCell. Les cellules et les lignes sont accessibles en utilisant PerformanceTable tr {} et PerformanceTable tr {}, respectivement.

Pour la partie d'espacement, j'ai eu le même problème plusieurs fois. J'avoue honteusement avoir évité le problème, je suis donc très curieux de toutes les réponses aussi.

0
BRUL

Prenez la largeur du tableau et divisez-la par le nombre de cellules ().

PerformanceTable {width:500px;}    
PerformanceTable.td {width:100px;}

Si le tableau s'élargit ou se rétrécit dynamiquement, vous pouvez augmenter dynamiquement la taille de la cellule avec un peu de javascript.

0
Chuck Conway