Donner une bordure à une ligne de tableau HTML, <tr>


90

Est-il possible de délimiter une ligne de tableau <tr>en une seule fois au lieu de donner une bordure aux cellules individuelles, <td>comme

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Cela donne une bordure autour du donné, <tr>mais cela nécessite une bordure autour des cellules individuelles.

Pouvons-nous donner une frontière <tr>en une seule fois?

→ jsFiddle

Réponses:


121

Vous pouvez définir des borderpropriétés sur un trélément, mais selon la spécification CSS 2.1, ces propriétés n'ont aucun effet dans le modèle de bordures séparées, qui a tendance à être la valeur par défaut dans les navigateurs. Réf .: 17.6.1 Le modèle des frontières séparées . (La valeur initiale de border-collapseest separateconforme à CSS 2.1, et certains navigateurs la définissent également comme valeur par défaut pour table. L'effet net de toute façon est que vous obtenez une bordure séparée sur presque tous les navigateurs, sauf si vous spécifiez explicitement collapse.)

Ainsi, vous devez utiliser des bordures réductrices. Exemple:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

1
@Robert Siemer S'il est vrai que cela met une bordure autour des lignes, cela nécessite également "border-collapse: collapse". Les colonnes ne peuvent pas être espacées à l'aide de la propriété cellpadding de cette manière. La propriété de contour utilisée dans la réponse de csmckelvey ci-dessous fournit un meilleur contrôle sur l'apparence du tableau et atteint exactement le même objectif. Cela ne devrait pas être la réponse acceptée car elle limite inutilement la fonctionnalité pour atteindre l'objectif.
me_

70

Absolument! Juste utiliser

<tr style="outline: thin solid">

sur quelle ligne vous aimez. Voici un violon .

Bien sûr, comme les gens l'ont mentionné, vous pouvez le faire via un identifiant, une classe ou d'autres moyens si vous le souhaitez.


2
<tr> doit être un conteneur et non un élément donc formater son enfant à travers son style n'est pas correct en termes de sémantique, même si cela fonctionne.
Itay Gal

1
Google Chrome et Internet Explorer affichent une bordure autour d'un <tr>mais Mozilla Fire Fox n'affiche pas de bordure.
Minuscule

Essayez d'utiliser à la outlineplace de border. Cela devrait corriger la compatibilité. Je n'ai que Chrome atm, donc je ne peux pas le tester.
takendarkk

4
Le contour n'est pas une frontière.
Jukka K. Korpela

2
Parfaitement compréhensible. Ce site vise à donner aux gens les meilleures réponses, pas mon représentant :)
takendarkk

16

Oui. J'ai mis à jour ma réponse DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Si vous voulez en créer un seul, <tr>vous pouvez le faire avec une classe: Deuxième DEMO


Il semble qu'Internet Explorer n'aime pas last-child(il ne semble pas prendre en charge).
Minuscule

@Tiny quelle version d'IE souhaitez-vous prendre en charge? La version 9+ prend en charge le premier et le dernier enfant.
Itay Gal

C'est Internet Explorer 8 mais ne vous inquiétez pas beaucoup :)
Minuscule

Vous ne stylisez pas <tr>, vous stylisez <td>.
Robert Siemer

5

Utilisez les classes CSS:

tr.border{
    outline: thin solid;
}

et utilisez-le comme:

<tr class="border">...</tr>

2

Vous pouvez utiliser la propriété box-shadow sur un élément tr comme sous-titre d'une bordure. De plus, toute propriété border-radius sur le même élément s'appliquera également à l'ombre de la boîte.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Cela offre beaucoup plus de contrôle sur le style que outlinene le fait. Devrait être une réponse plus élevée.
Jacob Stamm

1

Cellule gauche:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

cellule (s) intermédiaire (s):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

cellule de droite:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

0

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>


Pourriez-vous ajouter un commentaire à votre réponse et expliquer ce que vous avez changé?
franiis le

0

ajout de l'espacement des bordures: 0rem 0.5rem; crée un espace pour chaque élément de cellule (td, th) sur son fond tout en ne laissant aucun espace entre les cellules

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

-2

Après m'être battu avec cela pendant longtemps, j'ai conclu que la réponse incroyablement simple est de simplement remplir le tableau avec des cellules vides pour remplir chaque ligne du tableau avec le même nombre de cellules (en tenant compte de colspan, évidemment). Avec le HTML généré par ordinateur, c'est très simple à organiser et évite de se battre avec des solutions de contournement complexes. L'illustration suit:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>
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.