solo - tabla html borde inferior

Añadir borde inferior a la fila de la tabla<tr>

Question

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

Primero probé el camino directo, es decir:

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

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

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

Eso todavía no funcionó.

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

Answer 1

Agregar border-collapse:collapse a su regla de tabla:

table { 
    border-collapse: collapse; 
}

Link

Answer 2

Al usar este método, descubrí que el espacio entre los elementos td causaba que se formara 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;
}

Answer 3

HTML

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

CSS

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

Answer 4

Hay muchas respuestas incompletas aquí. Ya que no puede aplicar un borde a la etiqueta tr , necesita aplicarlo a las etiquetas td o th así:

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

Hacer esto dejará un pequeño espacio entre cada td , lo que probablemente no sea conveniente si desea que el borde aparezca como si fuera la etiqueta tr . Para "completar los huecos", por así decirlo, debe utilizar la propiedad border-collapse en el elemento de la table y establecer su valor en collapse , de esta manera:

table {
  border-collapse: collapse;
}

Answer 5

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

Answer 6

No puedes poner un borde en un elemento tr. Esto me funcionó en Firefox e IE 11:

<td style=''border-bottom:1pt solid black''>

Answer 7

Otra solución para esto es la propiedad de border-spacing :

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

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Answer 8

Tuve un problema como este antes No creo que tr pueda tomar un estilo de borde directamente. Mi solución fue td el td s en la fila:

<tr class="border_bottom">

CSS:

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

Answer 9

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

Answer 10

Utilizar

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

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

Answer 11

Utilizar

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

Reemplace "sólido delgado" con propiedades CSS.

Answer 12

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

Puedes hacer lo mismo para toda la fila también.

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

Puede ver (e INTENTARSE en línea) más detalles here