È possibile avere più colori di sfondo per una cella di tabella come nell'immagine qui sotto?Tabella Cella sfondo a due colori in diagonale
Two color table cell background sembra di fare qualcosa di simile a quello che voglio, ma non è esattamente in diagonale.
Sia l'esistente le risposte sono buone e questo non è un t tentare di metterli in alcun modo. Questo è un miglioramento su di loro che può essere utilizzato se si desidera un design reattivo con gradienti.
Come già menzionato nelle altre due risposte (e visto nel frammento di seguito), gli angoli del gradiente dovrebbero essere modificati se l'altezza o la larghezza delle modifiche di td. Questo è un inconveniente quando il design deve essere reattivo, ma può essere evitato quando si utilizza la sintassi del gradiente to [side] [side] invece dei gradienti angolati. Questa sintassi può adattarsi a qualsiasi modifica delle dimensioni.
td {
background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
color: #fff;
}
Il testo all'interno avrebbe bisogno posizionamento in più per farlo apparire esattamente come nella questione.
tr:nth-child(3) td {
background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
color: #fff;
}
tr:nth-child(1) td {
background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
color: #fff;
}
tr:nth-child(2) td {
background: linear-gradient(33deg, #167891 50%, #0D507A 51%);
color: #fff;
}
/* Just for demo */
table {
float: left;
}
table:nth-child(2) td {
height: 50px;
}
table:nth-child(3) td {
height: 100px;
}
table:nth-child(4) td {
height: 150px;
}<!-- prefix library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>
<table>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
<tr><td>Two Color Background</td></tr>
</table>È necessario aggiungere un grado di rotazione al gradiente lineare. Si noti che questo dipende dall'altezza dell'elemento td.
td {
background: rgba(240, 105, 93, 1);
background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
color: #fff;
height: 50px;
}<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>indipendente di altezza:
Basato sul commento di Harry to top right funzionerà meglio dal momento che è indipendente dalla altezza.
td {
background: rgba(240, 105, 93, 1);
background: linear-gradient(to top right, #167891 50%, #0D507A 51%);
color: #fff;
height: 50px;
}<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>È anche possibile utilizzare il 'a [lato] [lato]' sintassi per mantenere la colorazione diagonale indipendente dalle dimensioni del 'td' :) – Harry
Grazie per il suggerimento, Harry . Sei il migliore! :) –
Come in questo JSFiddle, basta impostare angoli gradiente come 33deg per abbinare gli angoli nel mio esempio
td {
height:100px;
background: -webkit-linear-gradient(33deg, lightblue 50%, navy 51%);
background: linear-gradient(33deg, lightblue 50%, navy 51%);
color:white;
}<table>
<tr>
<td>Two Color Background</td>
</tr>
</table>
@ Henry - semplicemente fantastico, in realtà dovevo chiedere lo stesso, come ho appena riscontrato questo problema. Grazie così tanto ! –
@PaRiMaLRaJ: prego amico. Sempre contento di essere di aiuto :) – Harry
una piccola domanda, perché "49% e 50%", perché non "50% e 51%"? –