如何创建一个具有双色背景的表格单元格？

Question

如何创建一个具有双色背景的表格单元格？

6

我正在尝试创建一个带有两种色调背景的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>

我该如何修复这个问题？

- Chowlett

这个 td 是否有固定宽度？ - rahul

不，但我可能可以安排它成为这样。 - Chowlett

7个回答

5

在视觉上，每种颜色看起来都是相等的，因此最好保持在代码中设置背景颜色的元素在同一级别而不是嵌套它们。在 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>

- Simon Lieschke

它在Internet Explorer 8中为什么不能工作？请确保您的页面没有在Internet Explorer 7浏览器模式或怪异模式文档模式下运行。 - Simon Lieschke

1

使用背景图可能更容易？然后你只需要将其应用于单元格。

- matpol

0

试试这个：

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

- nickf

我宁愿不用指定单元格大小，尽管我知道使用ems来做这件事并不太糟糕。这可能与使用背景图像有关，就像“如果必须”的情况一样。 - Chowlett

0

只需创建一个左侧为一种颜色，右侧为另一种颜色的长而窄的图像。然后给它应用以下样式：

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

（未经测试，但应该是类似这样的:p）

- Svish

我倾向于不使用背景图片（如果那是唯一的选项，我也可以使用），因为一个单元格最多可以有6种颜色对应（这取决于其内容是否代表具有4个不同特征的物体中的两个）。 - Chowlett

@Chris：我认为使用背景图片仍然是最简单和最清晰的方法。如果你像我一样懒，你可以随时使用php或其他东西在运行时生成图像（应该以某种方式进行缓存）。只需将所需颜色等作为GET参数发送即可。 - Svish

例如：background: url('cell-background.php?color=green') center repeat-y; - Svish

0

如果td是固定宽度的，则可以创建一个尺寸等于fixedWidth_in_px * 1px的图像，并将其设置为背景，将background-repeat设置为repeat-y，以便填充整个td的高度。类似这样：

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

- rahul

1

请确保该图像高度至少为100像素。否则，浏览器会在背景上绘制自己直到死亡。 - Aaron Digulla

0

对于我的解决方案，单元格内没有其他元素或文本，因此可以使用单元格的边框使其看起来像有两种背景颜色。因此，将这两种样式应用于设置为50px的td，即可呈现出具有2个伪背景颜色的效果。

.halfleft_casual {    
  border-right:25px solid blue;
}
.halfleft_member {    
  border-right:25px solid green;  
}

- Jonathon Batson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Digulla · Accepted Answer

你必须将内容DIV嵌套在黄色DIV中：

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

[编辑] 这种方法有一个缺陷：内部

将被限制在黄色的

中（即它只使用页面宽度的50%）。

因此，我们需要另一个

、绝对定位和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>

与 Firefox 3.6 兼容。