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;    <!-- Необходимо подобрать значение под монитор, на котором показывать -->
		}
		.td-hidden {
			border-bottom: 0px;
		}
		.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 class ="td-hidden"></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">
			<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>