如何设置表格单元格2种颜色？

如何用2种颜色创建<td>？如何设置表格单元格2种颜色？

这是我的代码：

<table cellspacing=0> 
    <tr> 
    <td bgcolor=green><img src='pic/s.gif' width=8 height=5></td> 
    <td bgcolor=#AAAAAA><img src='pic/s.gif' width=72 height=5></td> 
    <td style="color: green;">10%</td> 
    </tr> 
</table>

，但我想用一个td与z-index=1写td 10％，但我不知道怎么办。

enter image description here

来源

2014-01-18 Maysam

我不明白你的目标是用这两种颜色来实现。你能给我们一个快速的图画来展示你的意思吗？ –

@ user3172276请解释一下这个问题，目前还不清楚 –

是不是很清楚。但是你的代码在jsfiddle http://jsfiddle.net/T7CNL/2/上看起来像这样。你缺少双引号和反斜线。首先正确地更改它... – Karuppiah

我希望你期待这样的结果......

DEMO JsFiddle

HTML

<table> 
     <tr> 
      <td class="red"></td> 
      <td class="green"><span class="ten">10%</span></td> 
     </tr> 
    </table>

CSS

table 
{ 
    border-collapse: collapse; 
} 
.red 
{ 
    background-color: red; 
    width: 10px; 
    height: 5px; 
} 
.green 
{ 
    background-color: green; 
    width: 90px; 
    height: 5px; 
} 
.ten 
{ 
    color: #ffffff; 
}

来源

2014-01-18 12:36:16 Karuppiah

确定这些是正确的，但我应该只使用**一个'td' ** – Maysam

@Maysam：像这样http://jsfiddle.net/ T7CNL/6 /。在这里我使用一个TD和多个跨度......？ – Karuppiah

我认为你可以做到这一点的最佳方式是创建一个像photoshop这样的图像，并选择你想要使用的两种颜色并将它们按需要分开。然后用代码做这样的事情：

<table> 
    <tr> 
     <td style="background-image:url('test/test.jpg');background-size:cover;"> 
      <table width="100%"> 
       <tr> 
        <td width="10%">10%</td> 
        <td width="90%">90%</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

希望这有助于！

来源

2014-01-18 12:44:35 KM123

它是动态的和值的变化 – Maysam

如果你的目标是动态的，那么我的上面的例子将工作 - 你将不得不确保background-size被设置为覆盖。这意味着它会随着桌子的缩小而增长 – KM123

你有很多的可能性，跨浏览器，而不是：演示http://codepen.io/anon/pen/zDAof

插图阴影，
线性渐变 -
背景图像
混合要不？

table { 
    width:100%; 
    height:100px; 
} 
td { 
    background:red; 
    padding-left:11%; 
} 
tr:first-child td { 
    box-shadow:inset 10vw 0 0 green 
} 
tr:nth-child(2) td { 
    background:linear-gradient(
    to right, 
    green 0, 
    green 10%, 
    transparent 10%, 
    transparent 100% 
) red; 
}tr:nth-child(3) td { 
    background:url(http://dummyimage.com/2000x1/ff0000/ff0000) repeat-y right green; 
    background-size:90%; 
} 
tr:last-child td { 
    background:linear-gradient(to right, 
    green, 
    green 10%, 
    red 10%, 
    red); 
}

HTML的演示：

<table> 
    <tr> 
    <td> inset shadow 
    </td> 
    </tr> 
    <tr> 
    <td> Linear- gradient + bg color 
    </td> 
    </tr> 
    <tr> 
    <td> 
     background-image repeat-y 
    </td> 
    </tr> 
    <tr> 
    <td> 
     linear-gradient 
    </td> 
    </tr> 
</table>

来源

2014-01-18 12:56:19

有趣的概念，但你真的需要一个表格布局？

这是一个FIDDLE与稍微不同的方法。

HTML

<table> 
    <tr><td> 
      <div class='celldiv'>20% 
       <div class='variablediv'></div> 
      </div> 
     </td></tr> 
</table>

CSS

td { 
    height: 20px; 
    width: 100px; 
    padding-left: 30px; 
} 
.celldiv { 
    height: 100%; 
    width: 100%; 
    background-color: red; 
} 
.variablediv { 
    float: left; 
    height: 100%; 
    width: 20%; 
    background-color: blue; 
    margin-right: 5px; 
}

而且可以动态改变蓝色的宽度和使用jQuery的数量。

只是一个想法。

来源

2014-01-18 13:24:04 TimSPQR

如何设置表格单元格2种颜色？

回答

相关问题