简体   繁体   中英

How to use a single continuous gradient that on affects one side of a table

I'm wondering if there is an "easy" way to gradient only one side of a table (ie: only the far left column) without doing each gradient individually to give the look of being continuous?

So in this code the dates should be colored and the color should start white and be a solid color at the bottom and all of the text should stay white

Please help, otherwise I'm in for a long night of headaches

<table>
    <tr>
        <td>1990</td>
        <td>words and things</td>
        <td>more words and things</td>
    </tr>
    <tr>
        <td>2000</td>
        <td>no color here</td>
        <td>nor color here</td>
    </tr>
    <tr>
        <td>2010</td>
        <td>this should be white</td>
        <td>and this too</td>
    </tr>
    <tr>
        <td>2020</td>
        <td>Oh the places you'll go</td>
        <td>the magic that is CSS</td>
    </tr>
    <tr>
        <td>2030</td>
        <td>I am but a lowly peon</td>
        <td>take pity upon my soul</td>
    </tr>
</table>

You can make your cross-browser gradient styles here: http://www.colorzilla.com/gradient-editor/

And some styles here - replace the comments with the stuff the generator creates for you:

tbody tr td:first-child {
    /* this will apply to the first cell in each row */
}

tbody tr td:first-child + td {
    /* this will apply to the second cell in each row */
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM