Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task 6</title>
    <style>
        table,
        td {
            border-collapse: collapse;
        }

        table {
            overflow: hidden;
        }

        td {
            padding: 5px 10px;
            border-bottom: 1px solid #ccc;
        }

        tbody tr:nth-child(2n + 1){
            background-color: rgba(41, 157, 255, .2);
        }

        tbody tr:hover {
            background-color: blue;
        }

        td, th {
            position: relative;
        }

        td:hover:after,
        th:hover:after {
            content: "";
            position: absolute;
            background-color: blue;
            left: 0;
            top: -5000px;
            height: 10000px;
            width: 100%;
            z-index: -1;
        }

        .controls {
            position: relative;
            max-height: 18px;
            overflow-y: visible;
        }

        .rad {
            display: none
        }

        tr {
            visibility: visible;
        }

        #A_level:checked ~ table>tbody>tr:not(*),
        #A_daytime:checked ~ table>tbody>tr:not(*),
        #A_speciality:checked ~ table>tbody>tr:not(*),
        #sp1:checked ~ table>tbody>tr:not([data-speciality="1"]),
        #sp2:checked ~ table>tbody>tr:not([data-speciality="2"]),
        #sp3:checked ~ table>tbody>tr:not([data-speciality="3"]),
        #sp4:checked ~ table>tbody>tr:not([data-speciality="4"]),
        #first:checked ~ table>tbody>tr:not([data-daytime="first"]),
        #second:checked ~ table>tbody>tr:not([data-daytime="second"]),
        #H:checked ~ table>tbody>tr:not([data-level="high"]),
        #M:checked ~ table>tbody>tr:not([data-level="mid"]),
        #L:checked ~ table>tbody>tr:not([data-level="low"]) {
            visibility: collapse;
        }

        #A_speciality:checked ~ .controls>#speciality>.A_speciality,
        #sp1:checked ~ .controls>#speciality>.sp1,
        #sp2:checked ~ .controls>#speciality>.sp2,
        #sp3:checked ~ .controls>#speciality>.sp3,
        #sp4:checked ~ .controls>#speciality>.sp4,
        #A_daytime:checked ~ .controls>#daytime>.A_daytime,
        #first:checked ~ .controls>#daytime>.first,
        #second:checked ~ .controls>#daytime>.second,
        #A_level:checked ~ .controls>#level>.A_level,
        #H:checked ~ .controls>#level>.H,
        #M:checked ~ .controls>#level>.M,
        #L:checked ~ .controls>#level>.L {
            background: red;
            color: white;
        }

        details {
            outline: 1px solid #000;
            padding: 0;
            display: inline-block;
            position: relative;
            float: left;
            z-index: 1;
            margin: 0 10px;
        }

        summary {
            font-size: medium;
            padding: 0 5px;
        }

        details label {
            display: block;
            cursor: pointer;
            border-bottom: 1px solid grey;
            background: #fff;
        }

        [type="submit"] {
            display: none;
        }

        form:valid > [type="submit"] {
            display: inline-block;
        }

    </style>
</head>
<body>
    <form id='main'>
        <input id="A_level" class='rad' name='rad_level' type='radio'>
        <input id='H' class='rad' name='rad_level' type='radio'>
        <input id='M' class='rad' name='rad_level' type='radio'>
        <input id='L' class='rad' name='rad_level' type='radio'>
        <input id='A_daytime' class='rad' name='rad_daytime' type='radio'>
        <input id='first' class='rad' name='rad_daytime' type='radio'>
        <input id='second' class='rad' name='rad_daytime' type='radio'>
        <input id='A_speciality' class='rad' name='rad_speciality' type='radio'>
        <input id='sp1' class='rad' name='rad_speciality' type='radio'>
        <input id="sp2" class='rad' name='rad_speciality' type='radio'>
        <input id="sp3" class='rad' name='rad_speciality' type='radio'>
        <input id="sp4" class='rad' name='rad_speciality' type='radio'>
        <fieldset class="controls">
            <details id="level">
                <summary>Кваліфікація</summary>
                <label for='A_level' class='A_level'>Всі</label>
                <label for='H' class='H'>Висока</label>
                <label for='M' class='M'>Середня</label>
                <label for='L' class='L'>Низька</label>
            </details>

            <details id="daytime">
                <summary>Час прийому</summary>
                <label for="A_daytime" class="A_daytime">Всі</label>
                <label for="first" class="first">8.00 - 12.00</label>
                <label for="second" class="second">14.00 - 18.00</label>
            </details>

            <details id="speciality">
                <summary>Спеціальність</summary>
                <label for="A_speciality" class="A_speciality">Всі</label>
                <label for="sp1" class="sp1">стоматолог</label>
                <label for="sp2" class="sp2">окуліст</label>
                <label for="sp3" class="sp3">хірург</label>
                <label for="sp4" class="sp4">терапвет</label>
            </details>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>speciality</th>
                    <th>name</th>
                    <th>level</th>
                    <th>number</th>
                    <th>daytime</th>
                </tr>
            </thead>
            <tbody>
                <tr data-level="high" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 1:2</td>
                    <td>висока</td>
                    <td>115</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="mid" data-daytime="second" data-speciality="2">
                    <td>окуліст</td>
                    <td>комірка 2:2</td>
                    <td>середня</td>
                    <td>23</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="low" data-daytime="second" data-speciality="3">
                    <td>хірург</td>
                    <td>комірка 3:2</td>
                    <td>низька</td>
                    <td>56</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="high" data-daytime="second" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 4:2</td>
                    <td>висока</td>
                    <td>89</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="mid" data-daytime="first" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 5:2</td>
                    <td>середня</td>
                    <td>16</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="low" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 6:2</td>
                    <td>низька</td>
                    <td>47</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="high" data-daytime="second" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 7:2</td>
                    <td>висока</td>
                    <td>12</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="mid" data-daytime="first" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 8:2</td>
                    <td>середня</td>
                    <td>23</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="low" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 9:2</td>
                    <td>низька</td>
                    <td>258</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="high" data-daytime="second" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 10:2</td>
                    <td>висока</td>
                    <td>456</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="mid" data-daytime="first" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 11:2</td>
                    <td>середня</td>
                    <td>249</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="low" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 12:2</td>
                    <td>низька</td>
                    <td>457</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="high" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 13:2</td>
                    <td>висока</td>
                    <td>123</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="mid" data-daytime="second" data-speciality="2">
                    <td>окуліст</td>
                    <td>комірка 14:2</td>
                    <td>середня</td>
                    <td>354</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="low" data-daytime="second" data-speciality="3">
                    <td>хірург</td>
                    <td>комірка 15:2</td>
                    <td>низька</td>
                    <td>564</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="high" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 16:2</td>
                    <td>висока</td>
                    <td>96</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="mid" data-daytime="second" data-speciality="2">
                    <td>окуліст</td>
                    <td>комірка 17:2</td>
                    <td>середня</td>
                    <td>457</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="low" data-daytime="second" data-speciality="3">
                    <td>хірург</td>
                    <td>комірка 18:2</td>
                    <td>низька</td>
                    <td>453</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="low" data-daytime="second" data-speciality="3">
                    <td>хірург</td>
                    <td>комірка 19:2</td>
                    <td>низька</td>
                    <td>324</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="high" data-daytime="second" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 20:2</td>
                    <td>висока</td>
                    <td>745</td>
                    <td>14.00 - 18.00</td>
                </tr>
                <tr data-level="mid" data-daytime="first" data-speciality="4">
                    <td>терапевт</td>
                    <td>комірка 21:2</td>
                    <td>середня</td>
                    <td>18</td>
                    <td>8.00 - 12.00</td>
                </tr>
                <tr data-level="low" data-daytime="first" data-speciality="1">
                    <td>стоматолог</td>
                    <td>комірка 22:2</td>
                    <td>низька</td>
                    <td>54</td>
                    <td>8.00 - 12.00</td>
                </tr>
            </tbody>
        </table>
    </form>

    <form action="#">
        <input type="tel" name="tel" placeholder="phone" required>
        <input type="email" name="email" placeholder="email" required>
        <input type="submit" name="submit">
    </form>

</body>
</html>