HTML/CSS/Table Style/td class

Материал из Web эксперт
Перейти к: навигация, поиск

hover with border

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Spicy Thai Peanut Sauce  </title>
        <style rel="stylesheet" type="text/css">
table.recipe tbody td:hover,
table.recipe thead th:hover,
table.recipe tfoot td ul:hover,
table.recipe caption:hover,
table.recipe tfoot td p:hover {
    background: black;
    color: white;
    font-weight: bold;
}
        </style>
    </head>
    <body>
        <table class="recipe">
            <caption>
                this is the caption.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> q</th>
                    <th> m</th>
                    <th> p</th>
                    <th> i</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> P</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>12</td>
                    <td> E</td>
                    <td> S</td>
                    <td> S</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td> E</td>
                    <td> G</td>
                    <td> M</td>
                </tr>
                <tr>
                    <td> 2</td>
                    <td> C</td>
                    <td> P</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 1</td>
                    <td> C</td>
                    <td> S</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> L</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 4</td>
                    <td> T</td>
                    <td> S</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 4</td>
                    <td> C</td>
                    <td> C</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> H</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>  .5</td>
                    <td>  C</td>
                    <td>  B</td>
                    <td>  </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <ul>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                        </ul>
                        <p>this is a test. this is a test. </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/td_class&oldid=5083»