web-dev-qa-db-fra.com

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

J'ai une table de 3 par 3. J'ai besoin d'un moyen d'ajouter une bordure pour le bas de chaque ligne tr et 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 ça n'a pas marché. J'ai donc ajouté CSS comme ceci:

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

Cela n'a toujours pas fonctionné.

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

htmlcsshtml-table
308
Sangram Nandkhile

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

<tr class="border_bottom">

CSS:

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

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

table { 
    border-collapse: collapse; 
}

Lien

432
Nathan Manousos

Utilisez border-collapse:collapse sur la table et border-bottom: 1pt solid black; sur le tr

61
Jpduro

Utilisation 

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

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

30
simoncereska

Il y a beaucoup de réponses incomplètes ici. Comme vous ne pouvez pas appliquer de bordure à la balise tr, vous devez l'appliquer aux balises td ou th comme suit:

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

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

table {
  border-collapse: collapse;
}
22
dmeyer

Affiche la ligne sous forme de bloc.

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

et pour afficher des couleurs alternatives simplement:

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

Utilisation 

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

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

7
Jesse

Lors de l’utilisation de cette méthode, j’ai constaté que l’espace entre les éléments td provoquait la formation d’un espace vide dans la bordure,.

Un moyen 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
DaveTheRave

J'ai essayé d'ajouter

    table {
      border-collapse: collapse;
    }

à côté du

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

et ensuite commenté out border-collapse pour voir ce qui a fonctionné. Avoir juste le sélecteur de tr avec la propriété du bas-frontière a fonctionné pour moi!

Pas de frontière CSS ex.

No Border CSS ex.

Pas de photo Border live

No Border Photo live

CSS Border ex.

CSS Border ex.

Table avec photo Border live

Table with Border photo live

1
MUFN

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

Vous pouvez faire la même chose pour toute la ligne.

Il existe border-bottom-style, border-top-style, border-left-style, border-right-style. Ou simplement border-style qui s’appliquent aux quatre frontières à la fois.

Vous pouvez voir (et ESSAYEZ-VOUS en ligne) plus de détails ici

1
David Silva-Barrera

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'>
1
rod

Plusieurs réponses intéressantes. Puisque vous voulez juste une bordure en bas (ou en haut), voici deux autres. En supposant que vous vouliez une bordure bleue de 3 pixels d'épaisseur. Dans la section de 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
Howard Cary Morris

Pas de bordure de bordure CSS:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
0
Gil Perez

Une autre solution à cela est border-spacing property:

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

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

0
Eugen Konkov

Vous pouvez utiliser la propriété box-shadow pour simuler la bordure d'un élément tr. Ajustez la position Y de box-shadow (représenté ci-dessous par 2px) 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);
}
0
Ian Bruce