Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Lab1task4 - Вариант 6 (Китова Екатерина)</title>
    <style type="text/css">
        table {
            text-align: left;
            width: 60%;
            border: 1px solid black;
            border-collapse: collapse;
        }
        .td {
            vertical-align: center;
            width: 350px;
            height: 25px;  <!-- Необходимо подобрать значение под монитор, на котором показывать -->
            padding: 3px;
            padding-left: 10px;
            border: 1px solid black;
        }
        .padding {
            vertical-align: top;
            padding-left: 40px;
            line-height: 26px;    <!-- Необходимо подобрать значение под монитор, на котором показывать -->
        }
        .tr {
            border: 1px solid black;
        }
        .hideText {
            display: table-cell;
            color: white;
            position: fixed;
            top: -5px;    <!-- Необходимо подобрать значение под монитор, на котором показывать -->
        }
        .showHiddenText:hover ~ .hideText {
            position: fixed;
            color: black;
        }
        .changeStyle:hover {
            background-color: black;
            color: white;
        }
        .hidden {
            display: none;
        }
    </style>
    </head>
    <body>
    <table>
        <tr class="tr">
            <td class="td"><b>Закладка 1</b></td>
            <td></td>
        </tr>
        <tr class="tr">
            <td class="td showHiddenText changeStyle"><b>Закладка 2</b></td>
            <td class="padding hideText" rowspan="3">
                <p><b>&#8226; - вариант 1 <br> &#9675; - вариант 2 <br> &#9675; - вариант 3 </b></p>
            </td>
        <tr class="tr">
        <tr>
            <td class="td"><b>Закладка 3</b></td>
            <td></td>
        </tr>
        <tr class="tr">
            <td class="td"><b>Закладка 4</b></td>
            <td></td>
        </tr>
    </table>
    </body>

</html>