Dar un borde a una fila de una tabla HTML, <tr>

90

¿Es posible bordear una fila de la tabla <tr>de una vez en lugar de dar un borde a celdas individuales, <td>como,

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

Esto da un borde alrededor de lo dado, <tr>pero requiere un borde alrededor de las celdas individuales.

¿Podemos dar un borde a <tr>solo de una vez?

→ jsFiddle

Minúsculo
fuente

Respuestas:

121

Puede establecer borderpropiedades en un trelemento, pero de acuerdo con la especificación CSS 2.1, tales propiedades no tienen ningún efecto en el modelo de bordes separados, que tiende a ser el predeterminado en los navegadores. Ref .: 17.6.1 El modelo de fronteras separadas . (El valor inicial de border-collapsees separatesegún CSS 2.1, y algunos navegadores también lo establecen como valor predeterminado para table. El efecto neto de todos modos es que obtiene un borde separado en casi todos los navegadores a menos que lo especifique explícitamente collapse)

Por lo tanto, debe utilizar bordes que se derrumben. Ejemplo:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
Jukka K. Korpela
fuente
1
@Robert Siemer Si bien es cierto que esto pone un borde alrededor de las filas, también requiere "colapso de borde: colapso". Las columnas no se pueden espaciar utilizando la propiedad cellpadding de esta manera. La propiedad de esquema utilizada en la respuesta de csmckelvey a continuación proporciona un mayor control sobre el aspecto de la tabla y logra exactamente el mismo objetivo. Esta no debería ser la respuesta aceptada, ya que limita innecesariamente la funcionalidad para lograr el objetivo.
yo_
70

¡Absolutamente! Solo usa

<tr style="outline: thin solid">

en la fila que te guste. Aquí tienes un violín .

Por supuesto, como ha mencionado la gente, puede hacerlo a través de una identificación, una clase o algún otro medio si lo desea.

tomado oscuro
fuente
2
<tr> debe ser un contenedor, no un elemento, por lo que formatear a su hijo a través de su estilo no es correcto en términos de semántica, incluso si funciona.
Itay Gal
1
Google Chrome e Internet Explorer muestran un borde alrededor de un, <tr>pero Mozilla Fire Fox no muestra un borde.
Diminuto
Intente usar en outlinelugar de border. Eso debería arreglar la compatibilidad. Solo tengo un cajero automático Chrome, por lo que no puedo probarlo.
tomado oscuro
4
El contorno no es borde.
Jukka K. Korpela
2
Perfectamente comprensible. Este sitio trata de dar a las personas las mejores respuestas, no a mi representante :)
tomadodarkk
16

Si. Actualicé mi respuesta 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 quieres estilizar solo uno <tr>, puedes hacerlo con una clase: Segunda DEMO

Itay Gal
fuente
Parece que a Internet Explorer no le gusta last-child(no parece ser compatible).
Diminuto
@Tiny, ¿qué versión de IE deseas admitir? La versión 9+ es compatible con el primer hijo y el último hijo.
Itay Gal
Es Internet Explorer 8, pero no te preocupes mucho :)
Tiny
No está aplicando estilo a <tr>, está aplicando estilo a <td>.
Robert Siemer
5

Hacer uso de clases CSS:

tr.border{
    outline: thin solid;
}

y utilícelo como:

<tr class="border">...</tr>
Fanie Reynders
fuente
2

Puede usar la propiedad box-shadow en un elemento tr como sustituto de un borde. Como ventaja, cualquier propiedad border-radius en el mismo elemento también se aplicará a la sombra del cuadro.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
Richard Bonneau
fuente
Esto ofrece mucho más control sobre el estilo que outlinehace. Debería ser una respuesta más alta.
Jacob Stamm
1

Celda izquierda:

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

midd celda (s):

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

celda derecha:

style="border-style:solid;border-width: 1px 1px 1px 0px;"
Juergen
fuente
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>

Malik
fuente
¿Podría agregar un comentario a su respuesta y explicar qué cambió?
franiis
0

agregando espaciado de bordes: 0rem 0.5rem; crea un espacio para cada elemento de celda (td, th) en su parte inferior sin dejar espacio entre las celdas

    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;
    }
Mensaje Akunna
fuente
-2

Después de luchar con esto durante mucho tiempo, he llegado a la conclusión de que la respuesta espectacularmente simple es simplemente llenar la tabla con celdas vacías para rellenar cada fila de la tabla con el mismo número de celdas (teniendo en cuenta colspan, obviamente). Con HTML generado por computadora, esto es muy simple de organizar y evita luchar con soluciones complejas. La siguiente ilustración:

<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>
David Crowe
fuente