Question

这里的一个简单问题，css3 gradient对我的要求没有帮助。我需要用两种颜色突出显示td，左半部分用一种颜色，右半部分用其他颜色。

输出应为：

我怎样才能做到这一点？

Answer 1

试试这将100％工作;

HTML:
<table >
<tr><td>welcome</td><td>welcome</td></tr>
</table>

css
table
{
  margin:0px;
  padding:0px;
  width:400px;
  border:1px solid #000;
  }
  table tr td
  {
    width:200px;
    background:linear-gradient(to right, red 50%, blue 50%);
    background-position:top left;
    text-align:center;
    background-size: 100% 100%;
  color:#fff;
  }

Answer 2

你需要这样吗？我不知道它是否正确？

<!DOCTYPE html>
<html>
    <head>
        <style>
            table td {
                border: 1px solid black;
                background: linear-gradient( to right, #ff9e2c 0%, #ff9e2c 50%, #FF0000 50%, #FF0000 100%);
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Feb</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>March</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>April</td>
                <td>$110</td>
            </tr>
        </table>
    </body>
</html>

Answer 3

div {
background: rgb(91, 155, 213);
background: linear-gradient(to right, rgba(91,155,213,1) 0%,rgba(91,155,213,1) 50%,rgba(158,191,229,1) 50%,rgba(158,191,229,1) 100%);
width:100px;
height:50px;
}

<div></div>

TD背景与两种颜色

3 个答案: