SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:CSS-sticky-column.html
Aus SELFHTML-Wiki
<!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>
