Come specificare il bordo inferiore di un <tr>?

36

provare la seguente invece:

<html> 
<head> 
    <title>Table row styling</title> 
    <style type="text/css"> 
    .bb td, .bb th { 
    border-bottom: 1px solid black !important; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tr class="bb"> 
     <td>This</td> 
     <td>should</td> 
     <td>work</td> 
    </tr> 
    </table> 
</body> 
</html>

fonte

2009-09-06 03:53:27

+0

Grazie per la risposta. Ma non funziona. – omg

+0

I stand corretti: prova border-bottom: 1px solido nero; anziché. –

+0

Ancora non funziona. – omg

6

Si dovrebbe definire lo stile sull'elemento td in questo modo:

<html> 
<head> 
    <style type="text/css"> 
     .bb 
     { 
      border-bottom: solid 1px black; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       Test 1 
      </td> 
     </tr> 
     <tr> 
      <td class="bb"> 
       Test 2 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

fonte

2009-09-06 04:03:08

+0

perché non è possibile modificare direttamente tr? – omg

+1

as ** deceze ** ha dichiarato: "Non è possibile applicare lo stile a , poiché è solo un" elemento di raggruppamento logico ", ma non viene effettivamente visualizzato. È possibile applicare lo stile solo agli elementi o all'interno dello . avere qualche." –

+3

Questo è un buon approccio. L'unica cosa che vorrei mettere in guardia è che la dimensione del rendering html crescerà in proporzione al numero di elementi TD nella tabella alla classe. Se la dimensione è un problema, saremo più efficaci bersagliando l'elemento table stesso alla tabella # idForTable tr td {border-bottom: 1px solid black}. Una clausola per l'intera serie di righe. –

22

Aggiungere border-collapse:collapse al tavolo.

Esempio:

table.myTable{ 
    border-collapse:collapse; 
} 

table.myTable tr{ 
    border:1px solid red; 
}

Questo ha funzionato per me.

fonte

2014-01-12 09:29:09

+4

Questa dovrebbe essere la risposta accettata. Mettendo il bordo sulle celle del tavolo si rompe. –

+0

Come detto prima, questa dovrebbe essere la risposta accettata. Aggiungere gli elementi al tuo tavolo non farà ciò che pensi che sarà. Vale a dire se non vuoi aggiungere più html alla tua pagina e rielaborare i tuoi tavoli ... questa è la soluzione più semplice che ho visto fino ad ora. – greaterKing

1

tr td 
{ 
    border-bottom: 2px solid silver; 
}

o se si desidera che il bordo interno del tag TR, si può fare questo:

tr td { 
    box-shadow: inset 0px -2px 0px silver; 
}

fonte

2014-01-23 22:16:14

1

Quello che voglio dire qui è come una sorta di add-on sulla risposta @Suciu Lucian.

La strana situazione in cui mi sono imbattuto è che quando applico la soluzione di @Suciu Lucian nel mio file, funziona in Chrome ma non in Safari (e non ho provato in Firefox). Dopo aver studiato il guide of styling table border pubblicato da w3.org, ho trovato qualcosa di alternativo:

table.myTable{ 
    border-spacing: 0; 
} 

table.myTable td{ 
    border-bottom:1px solid red; 
}

Sì, bisogna per lo stile della td al posto del tr.

fonte

2016-04-28 07:08:46 Halt

Come specificare il bordo inferiore di un <tr>?

risposta

Problemi correlati