JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<table class="calendar">
	<caption>Mai</caption>
	<thead>
		<tr>
			<th>Uhrzeit</th>
			<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
			<th>6</th><th>7</th><th>8</th><th>9</th><th>10</th>
			<th>11</th><th>12</th><th>13</th><th>14</th><th>15</th>
			<th>16</th><th>17</th><th>18</th><th>19</th><th>20</th>
			<th>21</th><th>22</th><th>23</th><th>24</th><th>25</th>
			<th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>08:00</th>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
		</tr>
		<tr>
			<th>08:15</th>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
		</tr>
 		<tr>
			<th>...</th>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
		</tr>
		<tr>
			<th>21:45</th>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<br>
<table class="calendar">
	<caption>Mai - mit...

CSS

.calendar {
  border-collapse: collapse;
  width: max-content;
}
.calendar caption {
  background-color: #800;
  color: white;
  font: bold 120% sans-serif;
}
.calendar thead th {
  width: 2em;
}
.calendar th,
.calendar td {
  font: 100% sans-serif;
  border: thin solid black;
}
.calendar th:first-child {
  width: 5em;
  border: thin solid black;
}

JavaScript

<