Ajouter une bordure inférieure à la ligne du tableau <tr>


386

J'ai un tableau de 3 par 3. J'ai besoin d'un moyen d'ajouter une bordure pour le bas de chaque ligne tret de lui donner une couleur spécifique.

J'ai d'abord essayé la voie directe, c'est-à-dire:

<tr style="border-bottom:1pt solid black;">

Mais cela n'a pas fonctionné. J'ai donc ajouté du CSS comme ceci:

tr {
border-bottom: 1pt solid black;
}

Cela ne fonctionnait toujours pas.

Je préférerais utiliser CSS car je n'ai pas besoin d'ajouter d' styleattribut à chaque ligne. Je n'ai pas ajouté d' borderattribut au <table>. J'espère que cela n'affecte pas mon CSS.


En remarque, si le style en ligne (premier exemple dans votre question) ne fonctionne pas, il est peu probable que le style intégré (deuxième exemple) fonctionne. Vous devriez également rechercher la disponibilité des attributs pour l'élément que vous essayez de styliser
Tass

Si vous voulez avoir une bordure en bas pour le tableau de la table, vous pouvez suivre ce jsfiddle.net/7awN4
AllenC

6
Juste une note pour encourager les futurs chercheurs à faire défiler la page jusqu'à la réponse de @Nathan Manousos, ci-dessous - c'est probablement la solution que vous recherchez
henry

Réponses:


400

J'ai eu un problème comme ça avant. Je ne pense pas que l' tron puisse prendre directement un style de bordure. Ma solution de contournement consistait à styliser les tds de la ligne:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

28
Notez qu'en utilisant cette solution, vous aurez très probablement un écart dans la frontière entre les td. La réponse de simoncereska prend soin de cela, mais sachez que cela peut ne pas être joli avec les types de bordure en pointillés ou en pointillés (car ils ne sont pas continus)
Griddo

24
Vous pouvez également y remédier en ajoutant cellspacing="0"comme attribut à <table>(voir cette question ). Je ne sais pas à quoi cela ressemblera avec des bordures en pointillés ou en pointillés.
Stefan van den Akker

5
trpeut prendre un style de bordure dans le modèle de bordure repliée. @Sangram, envisagez d'accepter une réponse qui en tienne compte au lieu de celle-ci, non?
Robert Siemer

Cela ne fonctionnera pas s'il y a un remplissage entre les cellules du tableau. S'il y a du rembourrage, la bordure sera visiblement divisée en morceaux.
Timothy Gonzalez

et votre table a besoin de ce style <table style = "border-collapse: collapse">
Oguz

511

Ajoutez border-collapse:collapseà votre règle de table:

table { 
    border-collapse: collapse; 
}

Lien


2
Cela ne fonctionne pas par lui-même. Vous ne pouvez toujours pas styliser la ligne, mais vous pouvez styliser les cellules.
Renan

49
Vous vous trompez, @Renan. Le modèle de bordure repliée est exactement ce qui rend les bordures de ligne stylables. Selon CSS sectoin 17.6 : Dans le modèle de bordure séparé, "Les lignes, [...] ne peuvent pas avoir de bordure (c'est-à-dire que les agents utilisateurs doivent ignorer les propriétés de bordure de ces éléments)." «Dans le modèle de bordure rétractable, il est possible de spécifier des bordures qui entourent tout ou partie d'une cellule, d'une ligne [et] d'un groupe de lignes [...]» Et au fait: cela fonctionne dans mon navigateur (Chromium 37).
Robert Siemer

12
Je pense que certaines personnes peuvent devenir confuses (comme moi) et ne remarquent pas que le style d'effondrement de la frontière doit être défini sur la table, pas sur la ligne.
Porlune

Il semble que Chrome ne dispose pas de cette fonctionnalité, bien qu'il prenne en charge d'autres fonctionnalités de réduction des bordures.
Liqun Sun

72

Utilisation border-collapse:collapsesur table et border-bottom: 1pt solid black;sur tr


6
définir une bordure sur le tr est inutile même avec une bordure effondrée. vous devez le placer sur les tds du tr
Radu Simionescu

9
@RaduSimionescu Mauvais, cela fonctionne parfaitement sur le trbord effondré.
Styphon

Aucun effet dans FF 45.0.1.
imrek

41

Utilisation

border-collapse:collapse comme Nathan l'a écrit et vous devez définir

td { border-bottom: 1px solid #000; }


C'est comme ça que je le ferais aussi! Ajoutez la bordure sur le td et utilisez border-collapse sur la table
Sayan

30

Il y a beaucoup de réponses incomplètes ici. Étant donné que vous ne pouvez pas appliquer une bordure à la trbalise, vous devez l'appliquer aux balises tdou thcomme ceci:

td {
  border-bottom: 1pt solid black;
}

Faire cela laissera un petit espace entre chacun td, ce qui n'est probablement pas souhaitable si vous voulez que la bordure apparaisse comme si c'était la trbalise. Afin de "combler les lacunes" pour ainsi dire, vous devez utiliser la border-collapsepropriété sur l' tableélément et définir sa valeur collapse, comme suit:

table {
  border-collapse: collapse;
}

8

Utilisation

table{border-collapse:collapse}
tr{border-top:thin solid}

Remplacez "mince solide" par des propriétés CSS.


7

Affichez la ligne sous forme de bloc.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

et pour afficher simplement des couleurs alternatives:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

11
Pas une bonne idée de se fixerdisplay: blockpourtr. Utilisez l'tr td { border-bottom: ... }annonce à latr.oddrow td { border-bottom: ... }place
vladr

4
le bloc d'affichage pourrait détruire la disposition de la table.border-collapse: l'effondrement sur la table elle-même est définitivement la meilleure solution
N4ppeL

7

Vous pouvez utiliser la box-shadowpropriété pour simuler une bordure d'un trélément. Ajustez la position Y de box-shadow(ci-dessous, représentée par 2 pixels) pour ajuster l'épaisseur.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

6

J'ai essayé d'ajouter

    table {
      border-collapse: collapse;
    }   

aux côtés du

    tr {
      bottom-border: 2pt solid #color;
    }

puis commenté l'effondrement de la frontière pour voir ce qui a fonctionné. Le simple fait d'avoir le sélecteur tr avec une propriété de bordure inférieure a fonctionné pour moi!

Pas de bordure CSS ex.

Pas de bordure CSS ex.

No Border Photo en direct

No Border Photo en direct

CSS Border ex.

CSS Border ex.

Tableau avec photo Border en direct

Tableau avec photo Border en direct


2

J'ai trouvé en utilisant cette méthode que l'espace entre les éléments td a provoqué un écart dans la bordure, mais n'ayez pas peur ...

Une façon de contourner cela:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Avec le CSS:

td.end{
    border:2px solid black;
}

2

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Vous pouvez également faire de même pour toute la ligne.

Il y a border-bottom-style, border-top-style, border-left-style, border-right-style. Ou tout simplement border-stylequi s'appliquent aux quatre frontières à la fois.

Vous pouvez voir (et ESSAYER VOUS-MÊME en ligne) plus de détails ici


2

Plusieurs réponses intéressantes. Puisque vous voulez juste une bordure en bas (ou en haut), voici deux autres. En supposant que vous souhaitiez une bordure bleue de 3 pixels d'épaisseur. Dans la section style, vous pouvez ajouter

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

Dans le code de la table soit

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

1

Une autre solution à cela est la border-spacingpropriété:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}
<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>


1

Pas de bordure CSS en bas:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

0

Vous ne pouvez pas mettre de bordure sur un élément tr. Cela a fonctionné pour moi dans Firefox et IE 11:

<td style='border-bottom:1pt solid black'>

vous ne pouvez pas mettre une bordure sur un tr. Réponse modifiée pour clarifier cela.
Decko

C'est la réponse la plus simple et la plus précise.
JamesC

-3

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}

2
inutile sans effondrement des frontières: effondrement;
m1crdy
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.