主页 / 问题 / 1133912
Accepted
UnitDen
Asked:2020-05-31 02:10:51 +0000 UTC2020-05-31 02:10:51 +0000 UTC

将 -webkit-linear-gradient 添加到表格 html 行

  • 772

您需要插入一个渐变，而不是在整行上，而是从 3 到 5 列，它必须是这样的

现在在此处输入图像描述 我需要什么在此处输入图像描述

<table>
    <thead>
        <tr>
            <th>---</th>
            <th>---</th>
            <th>First</th>
      <th>Second</th>
            <th>Three</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>not gradient</td>
            <td>not gradient</td>
            <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
    </tbody>
</table>

* {margin:0;padding:0;border:0;border-collapse:collapse;}

table { 
width:100%;
}

th, td {
         border: 2px solid black;
         text-align: center;
}

tbody { 
    background: -webkit-linear-gradient(left, #729fcf 10%, #93971c 10% 20%, #16eab7 20% 35%, #427b70 35%  45%, #861d53 45% 60%, #729fcf 60% 80%, green 0);

    background-attachment:fixed;}

thead tr, thead th { background:transparent; }

链接到示例

http://jsfiddle.net/cpLuye4d/2/

html

1 个回答

  1. Best Answer

    您需要将渐变应用到从第 3 列开始的行，并且从第 1 列开始应用。首先，值得为直到第 3 列的渐变添加透明度，例如，如下所示：

    <style>
tbody { 
    background: -webkit-linear-gradient(left, transparent 40%,
        #729fcf 40% 45%, #93971c 45% 50%, #16eab7 50% 65%, #427b70 65% 75%, #861d53 75% 90%, #729fcf 90% 95%, green 0);
}
</style>

    但是如何准确猜测第一列和第二列将占据多少宽度？自己问：

    <style>
th:nth-of-type(1), td:nth-of-type(1), 
th:nth-of-type(2), td:nth-of-type(2) { 
    width: 20%;
}
</style>

    PS你现在还需要将浏览器前缀添加到线性渐变等属性吗？

    • 2

相关问题