Wie eine Tabellenzelle mit einem zweifarbigen Hintergrund zu schaffen?

StackOverflow https://stackoverflow.com/questions/2446168

Frage

Ich versuche, eine HTML-Tabellenzelle mit einem zweifarbigen Hintergrund zu schaffen; so habe ich normalen Text auf einem Hintergrund, der auf der linken Seite ist gelb und grün auf der rechten Seite.

Der nächstgelegene ich bisher bekommen habe ist wie folgt. Der Hintergrund ist richtig halb und halb, aber der Inhalt Text darunter verschoben. 

<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>

Wie kann ich diese oben beheben?

War es hilfreich?

Lösung

Optisch jede Farbe erscheint als equals so ideal würden Sie die Elemente beibehalten, die die Hintergrundfarben auf der gleichen Ebene in dem Code festgelegt, anstatt sie zu nisten. Aufbauend auf Aaron Antwort: 

<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>

Andere Tipps

Sie müssen Nest der Inhalt DIV im gelben DIV: 

<div class="yellow"><div class="content">Hello</div></div>

[EDIT] Dies hat einen Nachteil: Die innere DIV wird auf den gelben DIV beschränkt werden (das heißt es nur 50% der Seitenbreite verwenden)

.

Wir brauchen also eine weitere div, absolute Positionierung und einen 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>

Arbeiten mit FF 3.6.

Es könnte einfacher sein, ein Hintergrundbild zu verwenden? Sie können dann nur diese auf die Zelle anwenden.

Versuchen Sie diese: 

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

Erstellen Sie einfach ein langes, dünnes Bild mit einer Farbe auf der linken Seite und eine andere auf der rechten Seite. geben es dann einen Stil wie folgt aus: 

background: url(image) center center repeat-y;

(Ungeprüfte, soll aber etwas in diese Richtung sein: p

Wenn die td fester ist Breite dann können Sie ein Bild mit Dimension fixedWidth_in_px * 1px gleich machen und legen Sie dieses Bild als Hintergrund und Set background-repeat zu wiederholen-y, so dass sie die gesamte Höhe des td füllen. So etwas wie 

td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}

Für meine Lösung hatte ich keine anderen Elemente oder Text innerhalb der Zelle so die Grenze der Zelle verwenden könnte es scheinen, als ob es zwei Hintergrundfarben. So Anwendung diese beiden Stile td Satz 50px erscheint mit zwei Pseudo-Hintergrundfarben. 

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top