Agregar borde inferior a la fila de la tabla <tr>

386

Tengo una tabla de 3 por 3. Necesito una forma de agregar un borde para la parte inferior de cada fila try darle un color específico.

Primero probé el camino directo, es decir:

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

Pero eso no funcionó. Entonces agregué CSS así:

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

Eso todavía no funcionó.

Preferiría usar CSS porque entonces no necesito agregar un styleatributo a cada fila. No he agregado un borderatributo a la <table>. Espero que eso no esté afectando mi CSS.

Sangram Nandkhile
fuente
Como nota al margen, si el estilo en línea (primer ejemplo en su pregunta) no funciona, entonces es poco probable que el estilo integrado (segundo ejemplo) funcione. También debe investigar la disponibilidad de atributos para el elemento que está tratando de diseñar
Tass
Si desea tener un borde inferior para la tabla tr, puede seguir este jsfiddle.net/7awN4
AllenC
66
Solo una nota para alentar a los futuros buscadores a desplazarse hacia abajo a la respuesta de @Nathan Manousos, a continuación: es probablemente la solución que está buscando
Henry

Respuestas:

400

Tuve un problema como este antes. No creo que trpueda tomar un estilo de borde directamente. Mi solución era diseñar los tds en la fila:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}
tsherif
fuente
28
Tenga en cuenta que al usar esta solución, lo más probable es que tenga un espacio en el borde entre los td. la respuesta de simoncereska se encarga de esto, pero tenga en cuenta que puede no verse bien con los tipos de borde punteado o punteado (porque no son continuos)
Griddo
24
También puede remediar esto agregando cellspacing="0"como un atributo a <table>(vea esta pregunta ). Sin embargo, no sé cómo se verá esto con bordes punteados o punteados.
Stefan van den Akker
55
trpuede tomar estilo de borde en el modelo de borde colapsante. @Sangram, considera aceptar una respuesta que tenga eso en cuenta en lugar de esta, ¿no?
Robert Siemer
Esto no funcionará si hay relleno entre las celdas de la tabla. Si hay relleno, entonces el borde se dividirá visiblemente en piezas.
Timothy Gonzalez el
y su mesa necesita este estilo <table style = "border-collapse: collapse">
Oguz
511

Agregar border-collapse:collapsea su tabla regla:

table { 
    border-collapse: collapse; 
}

Enlace

Nathan Manousos
fuente
2
Esto no funciona por sí solo. Aún no puede diseñar la fila, pero puede diseñar las celdas.
Renan
49
Estás equivocado, @Renan. El modelo de borde colapsante es exactamente lo que hace que los bordes de fila sean estilizables. De acuerdo con la sección 17.6 de CSS : en el modelo de borde separado "Las filas [...] no pueden tener bordes (es decir, los agentes de usuario deben ignorar las propiedades de borde para esos elementos)". “En el modelo de borde que se contrae, es posible especificar bordes que rodean todo o parte de una celda, fila [y] grupo de filas [...]” Y, por cierto: funciona en mi navegador (Chromium 37).
Robert Siemer
12
Creo que algunas personas pueden estar confundidas (como yo) y no se dan cuenta de que el estilo de colapso del borde debe establecerse en la mesa, no en la fila.
Porlune
Parece que Chrome no tiene esta función, aunque admite otras funciones de colapso de borde.
Liqun Sun
72

Usar border-collapse:collapseen la mesa y border-bottom: 1pt solid black;en el tr

Jpduro
fuente
66
establecer el borde en el tr es inútil incluso con el borde contraído. tienes que configurarlo en los tds del tr
Radu Simionescu
99
@RaduSimionescu Incorrecto, funciona perfectamente bien con el trborde colapsado.
Styphon
Sin efecto en FF 45.0.1.
imrek
41

Utilizar

border-collapse:collapse como Nathan escribió y necesitas configurar

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

simoncereska
fuente
¡Así es como lo haría yo también! Agregue el borde en el td y use el colapso del borde en la mesa
Sayan
30

Hay muchas respuestas incompletas aquí. Como no puede aplicar un borde a la tretiqueta, debe aplicarlo a las etiquetas tdo thasí:

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

Hacer esto dejará un pequeño espacio entre cada uno td, lo que probablemente no sea deseable si desea que el borde aparezca como si fuera la tretiqueta. Para "rellenar los huecos", por así decirlo, debe utilizar la border-collapsepropiedad en el tableelemento y establecer su valor de la siguiente collapsemanera:

table {
  border-collapse: collapse;
}
dmeyer
fuente
8

Utilizar

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

Reemplace "sólido delgado" con propiedades CSS.

Jesse
fuente
7

Mostrar la fila como un bloque.

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

y para mostrar colores alternativos simplemente:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}
Jeremey
fuente
11
No es una buena idea establecerdisplay: blockparatr's. Utilice eltr td { border-bottom: ... }anuncio en sutr.oddrow td { border-bottom: ... }lugar
vladr
44
el bloque de visualización podría destruir el diseño de la tabla. colapso de la frontera: el colapso en la tabla es definitivamente la mejor solución
N4ppeL
7

Puede usar la box-shadowpropiedad para falsificar un borde de un trelemento. Ajuste la posición Y de box-shadow(representada a continuación como 2px) para ajustar el grosor.

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);
}
Ian Bruce
fuente
6

Traté de agregar

    table {
      border-collapse: collapse;
    }   

junto al

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

y luego comentó el colapso de la frontera para ver qué funcionó. ¡Tener el selector tr con propiedad de borde inferior funcionó para mí!

Sin borde CSS ex.

Sin borde CSS ex.

No Border Photo live

No Border Photo live

CSS Border ex.

CSS Border ex.

Mesa con borde foto en vivo

Mesa con borde foto en vivo

MUFN
fuente
2

Al usar este método, descubrí que el espacio entre los elementos td causaba la formación de un espacio en el borde, pero no tengas miedo ...

Una forma de evitar esto:

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

Con el CSS:

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

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

También puede hacer lo mismo con toda la fila.

Hay border-bottom-style, border-top-style, border-left-style, border-right-style. O simplemente border-styleeso se aplica a los cuatro bordes a la vez.

Puede ver (y PROBARSE en línea) más detalles aquí

David Silva-Barrera
fuente
2

Varias respuestas interesantes. Como solo desea un borde inferior (o superior), aquí hay dos más. Asumiendo que quieres un borde azul de 3px de grosor. En la sección de estilo puedes agregar

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

En el código de la tabla tampoco

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
Howard Cary Morris
fuente
1

Otra solución a esto es la border-spacingpropiedad:

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

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

Eugen Konkov
fuente
1

Sin borde inferior CSS:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
Gil Pérez
fuente
0

No se puede poner un borde en un elemento tr. Esto funcionó para mí en Firefox e IE 11:

<td style='border-bottom:1pt solid black'>
varilla
fuente
no puedes poner un borde en un tr. Respuesta editada para aclarar esto.
Decko
Esa es la respuesta más simple y precisa.
JamesC
-3

HTML

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

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}
vikas
fuente
2
inútil sin colapso de borde: colapso;
m1crdy