web-dev-qa-db-fra.com

Styling du dernier td dans une table avec css

Je veux styliser le dernier TD dans un tableau sans utiliser de classe CSS sur le TD particulier.

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

Je veux que le TD contenant le texte "Cinq" ne comporte pas de bordure, mais encore une fois, je ne veux pas utiliser une classe.

htmlcsshtml-table
59
vchoke

Vous pouvez utiliser des règles relatives:

table td + td + td + td + td {
  border: none;
}

Cela ne fonctionne que si le nombre de colonnes n'est pas déterminé au moment de l'exécution.

37
sblundy

Le :last-child _ selector devrait le faire, mais c'est non supporté par toutes les versions d'IE .

J'ai bien peur que vous n'ayez d'autre choix que d'utiliser un cours.

81
yoavf

Vous pouvez utiliser le :last-of-type pseudo-classe:

tr > td:last-of-type {
    /* styling here */
}

Voir le MDN pour plus d'informations et la compatibilité avec les différents navigateurs.
Consultez le directives CSS du W3C pour plus d’informations.

30
series0ne

vous pouvez utiliser la pseudo-classe last-child

table tr td:last-child {
    border: none;
}

Cela ne sera que le dernier style. Ce n'est pas encore complètement supporté, donc ça peut être inapproprié

19
Neil Aitken

Si vous utilisez déjà javascript, jetez un oeil à jQuery. Il prend en charge un sélecteur "dernier enfant" indépendant du navigateur et vous pouvez faire quelque chose comme ceci.

$("td:last-child").css({border:"none"})
16
joshperry

essayez avec:

tr:last-child td:last-child{
    border:none;
    /*any other style*/
}

cela n'affectera que le tout dernier élément td de la table, en supposant qu'il s'agisse du seul élément (sinon, il vous suffira d'identifier votre table). Bien que, est très générale, et il va s'adapter à la dernière TD si vous ajoutez plus de contenu à votre table. Donc, si c'est un cas particulier

td:nth-child(5){
    border:none;
}

devrait suffire.

10
Kurt Poehler

Javascript est le seul moyen viable de faire ce côté client (c’est-à-dire que CSS ne vous aidera pas). Dans jQuery:

$("table td:last").css("border", "none");
3
nickf

Dans jQuery, à condition que la table soit créée de manière statique ou dynamique avant l'exécution des opérations suivantes:

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });

Ajoute simplement une bordure droite à chaque cellule d'une ligne du tableau à l'exception de la dernière cellule.

2
Jim R.

Vous pouvez utiliser l'élément col comme spécifié dans HTML 4.0 ( link ). Cela fonctionne dans tous les navigateurs. Vous pouvez lui donner un identifiant, une classe ou un style en ligne. Le seul inconvénient est qu'il affecte toute la colonne sur toutes les lignes. Exemple:

<table>
    <col />
    <col width="50" />
    <col id="anId" />
    <col class="whatever" />
    <col style="border:1px solid #000;" />
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>
2
Darko Z

Je cherchais un moyen de faire cela aussi et j'ai trouvé ceci, qui pourrait être utile à d'autres personnes:

#table td:last-of-type { border: none; }

Notez que ce n'est pas supporté par IE soit.

1
rachel

Ce n’est pas une réponse directe à votre question, mais l’utilisation de <tfoot> pourrait vous aider à obtenir ce dont vous avez besoin, et bien sûr, vous pouvez personnaliser votre style.

1
Kevin Le - Khnle

Pour IE, pourquoi ne pas utiliser une expression CSS:

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
1
Liggy

Il existe également une approche différente .. et cela fonctionnerait pour des tables qui ne sont pas statiques ... utilisez essentiellement <th> au lieu de <td> pour cette colonne:

<style type="text/css">
 table td { border: 1px solid black; }
 table th { border: 0px; }
<style>
<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
  </tbody>
</table>
0
Mottie

C'est le code qui ajoutera une bordure pour tous les nœuds et supprimera la bordure pour le dernier nœud (TD).

<style type="text/css">
    body {  
        font-family:arial;font-size: 8pt;  
    }  
    table td{
        border-right: #666 1px solid
    }  

    table td {  
        h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right:  0px solid' ) );  
    }  
</style>
<table>
    <tr>
        <td>Home</td>
        <td>sunil</td>
        <td>Kumar</td>
        <td>Rayadurg</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

Prendre plaisir ...

Je veux le même au lieu de frontière je le voulais en utilisant des images ... :-)

0
sunilr