SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Beispiel:CSS-sticky-column.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>sticky column</title>
		<style>
			@import url('/skins/Selfhtml/global_vars.css');
			@import url('/skins/Selfhtml/fonts/fonts.css');
			body {
				--border-color: var(--red);
				--border-accent: var(--red2);
				--border-width: 4px;
				font-family: var(--page-fonts);
				margin: 8px;
				background-color: var(--bgcolor);
			}
			h1 {
				font-family: Nunito;
				display: flex;
				justify-content: start;
				align-items: center;
				gap: 1em;
			}
			h1 img {
				width: 2em;
				border: 3px solid white;
				background-color: white;
				border-radius: 4px;
			}

			section.sticky-scroll {
				border-top: 3px solid var(--mw-panel-bg);
				margin-top: 1em;
				padding-block: 1em;
                overflow-x: auto;
                scrollbar-width: thin;
			}
			
			:is(.sc-rand-basis, .sc-rand-B) .sticky-scroll {
				table {
					border-collapse: collapse;
				}
				
				:is(th, td) {
					border: var(--border-width) solid var(--border-color);
				}
			}

			.sc-rand-B .sticky-scroll {
				:is(th, td):first-child {
					border-inline: 0;
					padding-inline: round(0.4em + var(--border-width), 1px);
					background-image: linear-gradient(90deg, 
						var(--border-accent) 0 var(--border-width), 
						var(--bgcolor) 0 calc(100% - var(--border-width)), 
						var(--border-accent) 0);						
				}
				
				:is(th, td):nth-child(2) {
					border-inline-start: 0;
				}
			}
			
			.sc-rand-A .sticky-scroll {
				table {
					border-collapse: separate;
					border-spacing: 0;
					border-top: var(--border-width) solid var(--border-accent);
				}
				
				:is(th, td) {
					border-bottom: var(--border-width) solid var(--border-color);
					border-right: var(--border-width) solid var(--border-color);
				}

				:is(th, td):first-child {
					border-left: var(--border-width) solid var(--border-accent);
				}

			}
			
			.sc-padding-em .sticky-scroll :is(th, td) {
				padding: 0.2em 0.4em;
			}
			.sc-padding-emround .sticky-scroll :is(th, td) {
				padding: round(0.2em, 1px) round(0.4em, 1px);
			}
			.sc-padding-px .sticky-scroll :is(th, td) {
				padding: 3px 6px;
			}

			.sticky-scroll :is(td, th) {
					
				&:nth-child(1) {
					position: sticky;
					left: 0;
					background-color: var(--bgcolor);
				}
				&:nth-child(n+2) {	
					min-width: 10em;
					background-color: var(--mw-panel-bg);
				}
			}
			
			.style-control {
				display: flex;
				margin-bottom: 1em;
				width: max-content;
				max-width: 100%;
				
				label {
					display: block;
				}
			}
			
			pre {
				margin: 0;
				xborder-bottom: thin dotted #888;
			}
			pre[class] {
				display: none;
			}
			
			.sc-rand-basis    pre.rand-basis     { display: block; }
			.sc-rand-A           pre.rand-A            { display: block; }
			.sc-rand-B           pre.rand-B            { display: block; }
			.sc-padding-em       pre.padding-em        { display: block; }
			.sc-padding-emround  pre.padding-emround   { display: block; }
			.sc-padding-px       pre.padding-px        { display: block; }
		</style>

		<script>
document.addEventListener("DOMContentLoaded", function() {
	document
		.querySelector(".style-control")
		.addEventListener("change", function(changeEvent) {
	
			const radio = changeEvent.target;
		      
			if (!(radio instanceof HTMLInputElement) || !radio.checked)
				return;
			
			updateRadioClass(radio);
		});
	
	document
		.querySelectorAll(".style-control input[type=radio]:checked")
		.forEach(updateRadioClass);
		
	function updateRadioClass(checkedButton) {
		const mainClasses = [... document.body.classList];

		for (let mc of mainClasses) {
			if (mc.startsWith("sc-"+checkedButton.name))
				document.body.classList.remove(mc);
		}
		document.body.classList.add("sc-" + checkedButton.name + "-" + checkedButton.value);
	}
});
		</script>
	</head>

	<body>
		<h1>
			<img src="/skins/Makeover/images/SELF-Logo.svg" alt="Selfhtml-Logo">
			<span>Tabelle mit „sticky“ Spalte 1</span>
		</h1>

		<fieldset class="style-control"><legend>Style-Varianten</legend>
			<fieldset><legend>Ränder</legend>
				<label><input type="radio" name="rand" value="basis" checked>Standard</label>
				<label><input type="radio" name="rand" value="A"            >Modell A</label>
				<label><input type="radio" name="rand" value="B"            >Modell B</label>
			</fieldset>
			<fieldset><legend>Zell-Padding</legend>
				<label><input type="radio" name="padding" value="em" checked>in em</label>
				<label><input type="radio" name="padding" value="emround"   >em + round()</label>
				<label><input type="radio" name="padding" value="px"        >in px</label>
			</fieldset>
		</fieldset>
		<section class="style-display">
<pre>   
   table {
</pre>
<pre class="rand-basis rand-B">
      border-collapse: collapse;
</pre>
<pre class="rand-A">
      border-collapse: separate;
      border-spacing: 0;
      border-top: var(--border-width) solid var(--border-color);
</pre>
<pre>
   }

   th, td {
</pre>
<pre class="padding-em"       >      padding: 0.2em 0.4em;</pre>
<pre class="padding-emround"  >      padding: round(0.2em, 1px) round(0.4em, 1px);</pre>
<pre class="padding-px"       >      padding: 3px 6px;</pre>
<pre class="rand-basis rand-B">
      border: var(--border-width) solid var(--border-color);
</pre>
<pre class="rand-A">
      border-bottom: var(--border-width) solid var(--border-color);
      border-right: var(--border-width) solid var(--border-color);
</pre>
<pre>
   }
   
   :is(th, td):first-child {
</pre>
<pre class="rand-basis">



</pre>
<pre class="rand-A">
      border-left: var(--border-width) solid var(--border-color);
</pre>
<pre class="rand-B">
      border-inline: 0;
      padding-inline: calc(0.4em + var(--border-width));
      background-image: linear-gradient(...);
</pre>
<pre>
   }
   
   :is(th, td):nth-child(2) {
</pre>
<pre class="rand-basis">  </pre>
<pre class="rand-B">
      border-inline-start: 0;
</pre>
<pre>   }</pre>
        </aside>
        
		<section class="sticky-scroll">
		<table>
		<thead>
			<tr>
				<th>Datum</th>
				<th>Spalte 1</th><th>Spalte 2</th><th>Spalte 3</th><th>Spalte 4</th><th>Spalte 5</th><th>Spalte 6</th><th>Spalte 7</th><th>Spalte 8</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>01.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
			<tr>
				<th>02.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
			<tr>
				<th>03.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
			<tr>
				<th>04.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
			<tr>
				<th>05.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
			<tr>
				<th>06.04.2024</th>
				<td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td><td>Data 5</td><td>Data 6</td><td>Data 7</td><td>Data 8</td>
			</tr>
		</tbody>
		</table>
		</main>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-sticky-column.html&oldid=102590“