Html 双色TD背景_Html_Css - Fatal编程技术网

Html 双色TD背景

html css

Html 双色TD背景,html,css,Html,Css,这里有一个简单的问题，css3 gradient对我的需求没有帮助。我需要用两种颜色突出显示td，左半部分用一种颜色，右半部分用另一种颜色输出应为：我怎样才能做到这一点呢？试试这个，它会100%起作用 HTML: <table > <tr><td>welcome</td><td>welcome</td></tr> </table> css table { margin:0px; pad

这里有一个简单的问题，

css3 gradient

对我的需求没有帮助。我需要用两种颜色突出显示

td

，左半部分用一种颜色，右半部分用另一种颜色

输出应为：

我怎样才能做到这一点呢？

试试这个，它会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;
  }

HTML：
欢迎光临
css
桌子
{
边际：0px；
填充：0px；
宽度：400px；
边框：1px实心#000；
}
表tr td
{
宽度：200px；
背景：线性梯度（向右，红色50%，蓝色50%）；
背景位置：左上角；
文本对齐：居中；
背景大小：100%100%；
颜色：#fff；
}

试试这个，它会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;
  }

HTML：
欢迎光临
css
桌子
{
边际：0px；
填充：0px；
宽度：400px；
边框：1px实心#000；
}
表tr td
{
宽度：200px；
背景：线性梯度（向右，红色50%，蓝色50%）；
背景位置：左上角；
文本对齐：居中；
背景大小：100%100%；
颜色：#fff；
}

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

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


表td{
边框：1px纯黑；
背景：线性梯度（向右，#ff9e2c 0%，#ff9e2c 50%，#FF0000 50%，#FF0000 100%）；
}
月
储蓄
一月
$100
二月
$1000
前进
$10
四月
$110

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

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


表td{
边框：1px纯黑；
背景：线性梯度（向右，#ff9e2c 0%，#ff9e2c 50%，#FF0000 50%，#FF0000 100%）；
}
月
储蓄
一月
$100
二月
$1000
前进
$10
四月
$110

div{
背景：rgb（91155213）；
背景：线性梯度（向右，rgba（91155213,1）0%，rgba（91155213,1）50%，rgba（158191229,1）50%，rgba（158191229,1）100%）；
宽度：100px；
高度：50px；
}

div{
背景：rgb（91155213）；
背景：线性梯度（向右，rgba（91155213,1）0%，rgba（91155213,1）50%，rgba（158191229,1）50%，rgba（158191229,1）100%）；
宽度：100px；
高度：50px；
}

为什么渐变没有帮助？您能显示预期输出的图像吗？它本身是

td

？它需要放在

表格中

之类的地方。用渐变来实现你所需要的是绝对可能的。你能把你试过的渐变的代码包括进去吗？你可以用渐变来做这个为什么渐变没有帮助？您能显示预期输出的图像吗？它本身是

td

？它需要放在

表格中

之类的地方。用渐变来实现你所需要的是绝对可能的。你能把你尝试过的渐变代码包括进来吗？你可以用gradienttry这个链接@Akki619试试这个链接@Akki619