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

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.

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

Agregar border-collapse:collapsea su tabla regla:

table { 
    border-collapse: collapse; 
}

Enlace

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

Utilizar

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

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

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

Utilizar

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

Reemplace "sólido delgado" con propiedades CSS.

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

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

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.

No Border Photo live

CSS Border ex.

Mesa con borde foto en vivo

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

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

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>

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>

Sin borde inferior CSS:

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

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

HTML

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

CSS

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