Come creare una cella di una tabella con uno sfondo a due colori?
-
20-09-2019 - |
Domanda
Sto cercando di creare una cella di tabella HTML con uno sfondo bicolore; quindi devo testo normale su uno sfondo che è di colore giallo sulla sinistra, e verde a destra.
Il più vicino che ho finora è il seguente. Lo sfondo è correttamente metà e metà, ma il testo contenuto è spostato al di sotto di esso.
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:relative;
width: 50%;
height: 100%;
background-color:yellow
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="yellow"></div>
<div class="content">Hello</div>
</td>
</tr>
</table>
</body>
</html>
Come posso risolvere questo?
Soluzione
visivamente ogni colore appare come uguali così idealmente si sarebbe mantenere gli elementi che impostano i colori di sfondo allo stesso livello nel codice invece di nidificazione. Partendo risposta di Aaron:
<html>
<head>
<style type='text/css'>
td {
padding: 0;
margin: 0;
text-align: center;
}
.container {
position: relative;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.content {
position: relative;
z-index: 1;
}
.yellow {
left: 0;
background-color: yellow;
}
.green {
right: 0;
background-color: green;
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0; margin: 0">
<td>
<div class="container">
<div class="content">Hello</div>
<div class="bg yellow"></div>
<div class="bg green"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Altri suggerimenti
È necessario nido DIV
contenuti nella DIV
gialla:
<div class="yellow"><div class="content">Hello</div></div>
[EDIT] Questo ha un difetto:. Il DIV interno sarà limitata al DIV
gialla (cioè esso utilizza solo il 50% della larghezza della pagina)
Quindi abbiamo bisogno di un altro div
, posizionamento assoluto e un z-index:
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:absolute; left:0px; top:0px;
width: 50%;
height: 100%;
background-color:yellow
}
div.container { position:relative; height: 100%; }
div.content { position:relative; z-index:1; }
</style>
</head>
<body style="width: 100%">
<table style="width: 25%; height: 150px;">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="container">
<div class="content">Hello</div>
<div class="yellow"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Funziona con 3,6 FF.
Potrebbe essere più facile da utilizzare un'immagine di sfondo? È possibile poi basta applicare questo alla cella.
Prova questo:
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:1em;
text-align:center
}
div.yellow
{
width: 50%;
height: 1em;
background-color:yellow
}
.content {
margin-top: -1em;
}
Basta creare una lunga immagine sottile con un colore a sinistra e l'altro a destra. Poi dare uno stile simile al seguente:
background: url(image) center center repeat-y;
(Non testato, ma dovrebbe essere qualcosa del genere: p
Se il TD è di larghezza fissa allora si può fare un'immagine con dimensione pari a fixedWidth_in_px * 1px
e impostare questa immagine come sfondo e impostare background-repeat per ripetere-y, in modo da riempire l'intera altezza del TD. Qualcosa di simile
td.bg
{
width: 100px;
height: 100%;
background: #fff url(imagepath) repeat-y;
}
Per la mia soluzione non avevo altri elementi o di testo all'interno della cella in modo potrebbe utilizzare il bordo della cella per farla apparire come se ci sono 2 colori di sfondo. Così agendo su entrambi questi stili di TD impostato a 50px appare con 2 pseudo colori di sfondo.
.halfleft_casual {
border-right:25px solid blue;
}
.halfleft_member {
border-right:25px solid green;
}