Beispiel:CSS-Anw-Tabelle-6a.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
table {
	border-collapse: collapse;
	table-layout: fixed;
	font: 1.2em sans-serif;
}

col {
  width: calc(1/7 * 100%);
}
.weekend { background-color: #fdd; }
thead th {
  font-size: 0.75em;
  font-weight: normal;
}

th, td {
	padding: 0.25em;
	text-align: center;
}

tbody tr:hover {
  background: hsl(220deg 100% 80% / 0.3);
}

table:has(td:nth-child(1):hover) col:nth-child(1),
table:has(td:nth-child(2):hover) col:nth-child(2),
table:has(td:nth-child(3):hover) col:nth-child(3),
table:has(td:nth-child(4):hover) col:nth-child(4),
table:has(td:nth-child(5):hover) col:nth-child(5),
table:has(td:nth-child(6):hover) col:nth-child(6),
table:has(td:nth-child(7):hover) col:nth-child(7) {
	background: hsl(20deg 100% 80% / 0.5);
}
  </style>
  <title>Tabellen mit CSS gestalten 6a</title>
</head>

<body>
<h1>Hervorheben von Tabellenspalten bei :hover</h1>
<p>Übernommen aus einem Codepen von Gunnar Bittersmann.</p>
<table lang="de">
	<caption>November 2019</caption>
	<colgroup>
		<col/>
		<col/>
		<col/>
		<col/>
		<col/>
		<col/>
		<col/>
	</colgroup>
	<thead>
		<tr>
			<th>Montag</th>
			<th>Dienstag</th>
			<th>Mittwoch</th>
			<th>Donnerstag</th>
			<th>Freitag</th>
			<th>Sonnabend</th>
			<th>Sonntag</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
			<td>16</td>
			<td>17</td>
		</tr>
		<tr>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
			<td>30</td>
			<td></td>
		</tr>
	</tbody>
</table>
  
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-Tabelle-6a.html&oldid=89598“