如何使用单个连续渐变影响表格的一侧

Question

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>

Answer 1

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