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

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.

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;
}

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

table { 
    border-collapse: collapse; 
}

Lien

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

Utilisation

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

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

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;
}

Utilisation

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

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

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;
}

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);
}

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.

No Border Photo en direct

CSS Border ex.

Tableau avec photo Border en direct

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;
}

<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

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>

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>

Pas de bordure CSS en bas:

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

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

HTML

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

CSS

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