Как создать ячейку таблицы с двухцветным фоном? - PullRequest
Новая
       52

Как создать ячейку таблицы с двухцветным фоном?

4 голосов
/ 15 марта 2010

Я пытаюсь создать ячейку таблицы HTML с двухцветным фоном; таким образом, у меня есть обычный текст на фоне, который является желтым слева, и зеленым справа.

Самое близкое, что у меня есть, это следующее. Фон правильно пополам, но текст содержимого смещен под ним. 

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

Как я могу это исправить?

Ответы [ 7 ]

6 голосов
/ 15 марта 2010

Вы должны вложить содержимое DIV в желтое DIV: 

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

[EDIT] Это имеет недостаток: внутренний DIV будет ограничен желтым DIV (т.е. он будет использовать только 50% ширины страницы).

Итак, нам нужен еще один div, абсолютное позиционирование и z-индекс: 

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

Работает с FF 3.6.

4 голосов
/ 15 марта 2010

Визуально каждый цвет выглядит как равный, поэтому в идеале вы должны поддерживать элементы, которые задают цвета фона на одном уровне в коде, а не вкладывать их. Построение ответа Аарона: 

<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>
1 голос
/ 15 марта 2010

Может быть проще использовать фоновое изображение? Затем вы можете просто применить это к ячейке.

0 голосов
/ 21 мая 2014

Для моего решения у меня не было других элементов или текста внутри ячейки, поэтому я мог использовать границу ячейки, чтобы она выглядела так, как будто есть 2 цвета фона. Таким образом, применение обоих этих стилей к значению td, установленному на 50 пикселей, появляется с двумя псевдо-фоновыми цветами. 

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}
0 голосов
/ 15 марта 2010

Если td имеет фиксированную ширину, то вы можете сделать изображение с размером, равным fixedWidth_in_px * 1px, установить это изображение в качестве фона и установить background-repeat для repeat-y, чтобы оно заполняло всю высоту td. , Что-то вроде 

td.bg
{
    width: 100px;
    height: 100%;
    background: #fff url(imagepath) repeat-y;
}
0 голосов
/ 15 марта 2010

Просто создайте длинное тонкое изображение с одним цветом слева и другим справа. Затем придать ему стиль, подобный следующему: 

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

(Не проверено, но должно быть что-то вроде этого: p

0 голосов
/ 15 марта 2010

Попробуйте это: 

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