css 表格Odd 色塊控制

by ken tsai

HTML

<table style='width:200px' id='TB'>

        <thead>

            <tr><td>表頭</td><td>表頭</td></tr>

        </thead>

        <tbody>

            <tr><td>111111111</td><td>1</td></tr>

            <tr><td>222222222</td><td>2</td></tr>

            <tr><td>3333333</td><td>3</td></tr>

            <tr><td>4444444</td><td>4</td></tr>

            <tr><td>555</td><td>5</td></tr>

            <tr><td>666666</td><td>6</td></tr>

        </tbody>

        <tfoot><tr><td colspan=2>表尾</td></tr></tfoot>

    </table>

CSS

<style>

    #TB thead tr,#TB tfoot tr{

        background-color:Gray;

        color:#f0f0f0;

    }

    #TB tbody tr:nth-child(even)  {
        /*奇數行 nth-child(2n+1),偶數行nth-child(2n+0)*/

        background-color:lightgray;

    }

 

    #TB tbody tr:hover{

        background-color:lightblue;

    }

</style>