Less more

by Petr Haluza

HTML

<table>

<thead>
	<tr>
		<th>den</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td class="__maxHeight">
			26.dubna
	
			<main>
				<div>jedna</div>
				<div>dve</div>
				<div>tri</div>
				<div>ctyry</div>
				<div>pet</div>
				<div>sest</div>
				<div>sedm</div>
				<div>osm</div>
				<input type="checkbox">
				<label></label>
			</main>
			
		</td>
	</tr>
	<tr>
		<td class="__maxHeight">
			26.dubna
	
			<main>
				<div>jedna</div>
				<div>dve</div>
				
				<input type="checkbox">
				<label></label>
			</main>
			
		</td>
	</tr>	
</tbody>
</table>

CSS

.__maxHeight main { display:block; position: relative; max-height:4em; overflow: hidden; mask-image: linear-gradient(180deg, white 30%, transparent); -webkit-mask-image: linear-gradient(180deg, white 30%, transparent)}
.__maxHeight main > input { cursor: pointer; display:block; position:absolute; z-index:11; width:100%; height: 3em; bottom:0; left:0; background: none; border: none }
.__maxHeight main > input + label { cursor: pointer; position: absolute; bottom:0; z-index: 10}
.__maxHeight main > input + label:after { content: "více"; }
.__maxHeight main:has(input:checked) { max-height:none; mask-image:none; -webkit-mask-image:none; }
.__maxHeight main > input:checked ~ label:after { content:"méně"}
.__maxHeight main > input:checked { height:1em}

/* jen demostylování buňky */
td { border: 1px solid lightblue; padding: 5px;}
main { padding-bottom: calc(1em + 5px)}
main > div { background: lightblue; margin: 2px 0; padding: 2px 5px}
main > div:hover { background: blue}