Aggiungi bordo inferiore alla riga della tabella <tr>

Ho una tabella di 3 per 3. Ho bisogno di un modo per aggiungere un bordo per il fondo di ogni riga tre dargli un colore specifico.

Per prima cosa ho provato il modo diretto, cioè:

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

Ma non ha funzionato. Quindi ho aggiunto CSS in questo modo:

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

Non funzionava ancora.

Preferirei usare i CSS perché non ho bisogno di aggiungere un styleattributo ad ogni riga. Non ho aggiunto un borderattributo a <table>. Spero che ciò non influisca sul mio CSS.

Ho avuto un problema come questo prima. Non credo che trpossa prendere direttamente uno stile di bordo. La mia soluzione è stata quella di modellare le tds nella riga:

<tr class="border_bottom">

CSS:

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

Aggiungi border-collapse:collapsealla regola della tabella:

table { 
    border-collapse: collapse; 
}

collegamento

Utilizzare border-collapse:collapsesul tavolo e border-bottom: 1pt solid black;sul tr

Uso

border-collapse:collapse come ha scritto Nathan e devi impostare

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

Ci sono molte risposte incomplete qui. Poiché non è possibile applicare un bordo al trtag, è necessario applicarlo ai tag tdo in questo thmodo:

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

In questo modo lascerà un piccolo spazio tra ciascuno td, il che probabilmente non è desiderabile se vuoi che il bordo appaia come se fosse il trtag. Per "riempire gli spazi" per così dire, è necessario utilizzare la border-collapseproprietà tablesull'elemento e impostarne il valore su collapse, in questo modo:

table {
  border-collapse: collapse;
}

Uso

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

Sostituisci "solido solido" con proprietà CSS.

Visualizza la riga come un blocco.

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

e per visualizzare colori alternativi semplicemente:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Puoi usare la box-shadowproprietà per simulare un bordo di un trelemento. Regola la posizione Y di box-shadow(sotto rappresentato come 2px) per regolare lo spessore.

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

Ho provato ad aggiungere

    table {
      border-collapse: collapse;
    }   

accanto al

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

e poi ha commentato il collasso dei confini per vedere cosa ha funzionato. Sto solo facendo funzionare il selettore tr con proprietà sul bordo inferiore!

Nessun bordo CSS ex.

Nessuna foto di confine dal vivo

CSS Border ex.

Tavolo con bordo foto dal vivo

Ho scoperto quando si utilizza questo metodo che lo spazio tra gli elementi td ha causato una lacuna nel bordo, ma non temere ...

Un modo per aggirare questo:

<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 il CSS:

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

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

Puoi fare lo stesso anche per l'intera riga.

C'è border-bottom-style, border-top-style, border-left-style, border-right-style. O semplicemente border-styleche si applicano a tutti e quattro i bordi contemporaneamente.

Puoi vedere (e provare te stesso online) maggiori dettagli qui

Diverse risposte interessanti. Dato che vuoi solo un bordo inferiore (o superiore) qui ce ne sono altri due. Supponendo di volere un bordo blu spesso 3px. Nella sezione stile puoi aggiungere

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

Nel codice tabella neanche

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Un'altra soluzione è la border-spacingproprietà:

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

table {
  border-spacing: 0px;
}

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

Nessun bordo inferiore CSS:

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

Non puoi mettere un bordo su un elemento tr. Questo ha funzionato per me in Firefox e Internet Explorer 11:

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

HTML

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

CSS

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