如何在表格CSS中制作渐变列

Question

我希望表格中的一列从上到下具有蓝色渐变背景。就像扩展到多行一样，精确地说是十行。本质上就像这个，但是是一列而不是行：

https://codepen.io/warkentien2/pen/JxxXvr

<table>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
</table>

Answer 1

您可以在想要渐变的列上应用

rowspan

，其值等于行数，然后在该

table

内添加一个

td

，其行数与外表相同，然后应用您在这张内桌上的渐变样式：

table.gradient {
    background-image: linear-gradient(red, yellow);
}

<table>
    <tr>
        <td>data</td>
        <td>data</td>
        <td rowspan="6">
            <table class="gradient">
            <tbody>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
            </tbody>
            </table>
        </td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>