Ho una tabella con bordi impostati su "nessuno" in CSS. Tuttavia, voglio mettere una linea orizzontale che separa ogni riga sul tavolo. Ho provato a inserire tag <hr> tra ogni tag <td> </td> per una riga particolare, ma stampa una linea nera orizzontale con piccoli spazi bianchi tra ogni colonna.Utilizzo di un tag <hr> con una tabella?
C'è un modo per stampare una linea orizzontale all'interno di una tabella utilizzando un metodo diverso?
Id suggeriscono mettere:
<tr style="border-bottom: 1px solid #000;">
su ogni riga che si desidera la linea di essere su. Puoi anche farlo individualmente per ogni cella.
Aggiornamento
Id consiglia di utilizzare una classe CSS e avere un foglio di stile separato se potete. Ad esempio
<tr class="bordered"></tr>
tr.bordered {
border-bottom: 1px solid #000;
}
Non è possibile inserire nulla che non sia una riga di tabella all'interno del corpo di una tabella.
Si dovrebbe, invece, assegnare una classe alle righe che richiedono la sottolineatura in modo da poterle definire per avere un bordo inferiore nel foglio di stile.
Si desidera mettere un bordo sull'elemento tr. Hr è una Regola Orizzontale, non un confine e non dovrebbe essere usata come una sola.
tr {
border-bottom: 1px solid #000;
}
<table cellpadding="0" cellspacing="0" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
noshade="noshade" attributo aiuterà a rimuovere l'ombra e un po 'idea può essere trovato da this link, voglio dire la linea HR basata CSS.
E lo stile base da tavolo come
.bottomborder {
border-bottom: 1px solid #CECECE;
}
<td class=border-bottom>
seguente non funziona
<tr class=border-bottom>
Non sarebbe
è possibile definire una classe CSS per il vostro 'separati' <tr>:
<style>
tr.separated td {
/* set border style for separated rows */
border-bottom: 1px solid black;
}
table {
/* make the border continuous (without gaps between columns) */
border-collapse: collapse;
}
</style>
Poi basta contrassegna le righe richieste:
<tr>
<td>
<td>
</tr>
<tr class="separated">
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
vedi esempio https://jsfiddle.net/64nydcfu/1/
I TR non possono ottenere stili di bordo. –
@WillLanni, grazie, ho corretto la mia risposta. – DRCB
Un'altra cosa, che rende questa risposta quasi esattamente come una delle altre, è che il bordo potrebbe apparire danneggiato a meno che la tabella non abbia un bordo-collasso: comprime lo stile su di esso. Ho svalutato la risposta che ha già questo in esso, ma grazie per aver effettuato la regolazione. Ho rimosso il downvote. –
Il modo migliore per aggiungere una linea orizzontale tra le righe è con i bordi CSS. Innanzitutto, si desidera comprimere tutti i bordi della tabella in modo che non vi sia spazio tra le celle (questo potrebbe aiutare anche la soluzione, ma non è consigliabile utilizzare hr per questo scopo). Quindi, specificare un bordo sul lato inferiore di ogni cella (td). Puoi anche mettere i bordi a sinistra, a destra, in alto, ecc. Vedi l'HTML autonomo sotto.
<html>
<head>
<style type='text/css'>
table.test { border-collapse: collapse; }
table.test td { border-bottom: 1px solid black; }
</style>
</head>
<body>
<table class='test'>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
Per ulteriori opzioni di bordo, selezionare this w3Schools page.
Questo dovrebbe essere contrassegnato come la risposta corretta, in quanto quello accettato non è in realtà possibile nella maggior parte dei browser moderni. Non sono sicuro che sia tornato in '11, ma non lo è più. –
So che questo thread non è stato toccato da un po 'ma mi sono imbattuto in questa possibile soluzione?
Ad esempio, se si utilizza una tabella a 2 colonne, utilizzare <td colspan="2"></td>. Si estenderà su due celle tra le due colonne, risparmiando la necessità di qualsiasi CSS aggiuntivo.
<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>
Si prega di essere gentile questo è il mio primo post in assoluto! :)
La soluzione fornita crea solo una cella che si estende su due colonne. La domanda dell'OP sta chiedendo ** _ un modo per creare una linea orizzontale per separare ogni riga in una tabella _ **. – Pineda
Se si inserisce la cella a più colonne in un nuovo tag
Non andrei con gli stili in linea ma usare invece una classe. – SpaceBeers
Personalmente userò una classe. Ma in entrambi i casi funziona + gli stili in linea è molto più facile da imparare per qualcuno che inizia a sviluppare e-mail in via di sviluppo – Undefined
Non credo che tr possa prendere direttamente uno stile di bordo. Vedi qui: http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr – Beachhouse