Gradient color in html table

问题

I need to insert my gradient from column "First" to "Three".The first two columns should not be painted over, the number of columns may vary

now:

should be

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

回答1:

OK, now to your modified question: just draw one gradient in each cell (=). you may need to calculate intermediate values at the cell separators.

The gradient is shown as a gradient with this snippet:

-webkit-linear-gradient(left, #729fcf 10%, #93971c 10% 20%, #16eab7 20% 38%, #427b70 38%, #861d53 55%, #729fcf 80%, green 100%)

Note that every point has just one percentage, or a homogenuous color is distributed over all the range.

来源：https://stackoverflow.com/questions/62102558/gradient-color-in-html-table