Tabellenüberschrift fixieren
stahlwanne
0 0 
JürgenB
0 
Gunnar Bittersmann
0 stahlwanne
0 stahlwanne
0 JürgenB
Tabellenüberschrift fixieren
stahlwanne
Hallo Community, ich würde mich als guten Anfänger bezeichnen und habe auch selfhtml schon durchforstet,einige Sachen auch gefunden und angewendet, allerdings für mein Problem noch keine Lösung gefunden. Das hier hat bei mir nicht funktioniert. Ich habe mir für meinen Podcast, den ich immer höre, eine kleine html "gebastelt". Im prinzip ist sie so schon für mich fast perfekt. Allerdings wollte ich die erste Zeile der Tabelle fixieren und das bekomme ich leider nicht hin. Deswegen hier meine Frage: Welcher "Codeschnipsel" fehlt noch an welcher Stelle?
hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Cp1252" />
<title>Podcast</title>
</head>
<style>
header{
thead th
{
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
}
}
body {
background-attachment : fixed;
margin-left : 10px;
margin-right : 10px;
margin-top : 10px;
margin-bottom : 0px;
}
p,h1,h2,h3,h4,ul,ol,li,div,td,th,thead,address,blockquote,nobr,b,i {
font-family : Verdana, Helvetica, Arial;
color : #0404B4;
font-size : 9pt;
}
table {
}
thead {
text-align : left;
position : sticky;
position : -webkit-sticky;
}
td {
vertical-align : top;
text-align : left;
}
table.data {
width : 100%;
border : 1px solid #E0E0E0;
}
table.data th {
color : #ffffff;
padding-left : 3px;
padding-right : 10px;
background-color : #86867F;
text-align : left;
position : sticky;
position : -webkit-sticky;
}
table.data td {
margin : 0px;
padding-left : 3px;
padding-right : 8px;
font-size : 9pt;
white-space : wrap;
}
tbody tr:nth-child(even) {
background-color: #FBF3B6;
color: #000;
}
ol,ul {
list-style-position : outside;
}
ul {
list-style-type : disk;
margin-top : 0px;
margin-bottom : 0px;
}
h1 {
color : #53525E;
font-weight : bold;
font-size : 10pt;
margin-top : 1px;
margin-bottom : 1px;
}
h2 {
color : #6A6972;
font-weight : bold;
font-size : 10pt;
margin-top : 1px;
margin-bottom : 3px;
}
a:link {
color : #000088;
text-decoration : none;
}
tr:hover {
text-decoration : true;
font-weight : bold;
background-color : #F8DD13;
}
td:hover {
text-decoration : true;
background-color : #FDEC71;
}
a:active {
color : #0000dd;
text-decoration : none;
}
a:focus {
color : #0000dd;
text-decoration : none;
}
@media print
{
table.data td {
color : #000000;
}
}
</style>
<body>
<h1>PODCAST</h1>
<h2>05.12.2021</h2>
<br/><br/>
<table class="data">
<tr>
<th>Datum</th>
<th>Nr/link</th>
<th>Titel</th>
<th>Beschreibung/Teilnehmer</th>
</tr>
<td>26.03.2020</td>
<td><li><a href="podcast_00001_prolog.mp3" target="Daten">Prolog</a></li></td>
<td>pocast-titel 1</td>
<td>Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. </td>
</body>
</html>
vielen Dank
-
Warum XHTML und nicht HTML5?
Dann ggf. Fehlerbeseitigung mit Hilfe eines Validators.
Dann weitersehen.
-
Dann ggf. Fehlerbeseitigung mit Hilfe eines Validators.
Und dieses CSS-Validators bitte auch…
-
-
Hallo,
vielleicht ist das was für dich:
https://www.j-berkemeier.de/TableSort_Beispiel3.html
Gruß
Jürgen -
@@stahlwanne
ich würde mich als guten Anfänger bezeichnen
Wann hast du denn angefangen? Deinem Code nach ist das schon etliche Jahre her.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Verwende
<!DOCTYPE html>, nichts anderes.<html>Hier fehlt die notwendige Angabe der Sprache des Seiteninhalts. Für deutschsprachige Seiten:
<html lang="de">.<head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252" />Verwende als Zeichencodierung UTF-8, nichts anderes. Das heißt: die Dateien UTF-8-codiert speichern und das angeben:
<meta charset="UTF-8"/>.<title>Podcast</title> </head>Da fehlt dann noch die Viewport-Angabe
<meta name="viewport" content="width=device-width, initial-scale=1.0">für responsive Webseiten. Und du solltest dir Gedanken machen, wie deine Tabelle auf einem Smartphone dargestellt werden soll. Horizontal scrollen?Das hier hat bei mir nicht funktioniert.
Du hast das auch nicht so wie’s dort
stehtstand umgesetzt:thead { position : sticky; position : -webkit-sticky;Die zweite Angabe überschreibt die erste, d.h. es gilt nicht der richtige Wert
sticky, sondern-webkit-sticky, den viele Browser gar nicht oder nicht mehr verstehen.Merke: Angaben mit Vendor-Präfix gehören (wenn man sie überhaupt verwendet) immer vor die richtigen Angaben. Aber eigentlich sollte man die überhaupt nicht verwenden. Im Falle von
stickyist das auch überhaupt nicht nötig. Ich hab das gleich mal aus dem Wiki geschmissen.Ebenfalls veraltet ist dor der Hinweis auf den Chromium-Bug, der ist inzwischen gefixt. Chrome und Edge können
thead { position: sticky }. Kann bitte jemand mit den erforderlichen Rechten das Beispiel aktualisieren und dann den Absatz „Beachten Sie“ löschen?Laut Can I Use verwendet der aktuelle Opera noch eine veraltete Chromium-Version? Das soll aber nicht weiter stören; Opera-Nutzer gibt es so gut wie keine und dann haben die halt nicht das Vergnügen des feststehenden Tabellenkopfes (progressive enhancement).
Deswegen hier meine Frage: Welcher "Codeschnipsel" fehlt noch an welcher Stelle?
Es sind einige Codeschnipsel zu viel: alle weiteren Angaben von
position: stickyaußer der fürthead.p,h1,h2,h3,h4,ul,ol,li,div,td,th,thead,address,blockquote,nobr,b,i { font-family : Verdana, Helvetica, Arial; color : #0404B4; font-size : 9pt; }Das macht so auch keinen Sinn, die Schriftart und -größe für alle möglichen Elemente zu setzen und sie dann für Überschriften nochmal zu überschreiben. Gib die Basis-Schrift für
bodyan, die wird dann vererbt.Verdana war mal angesagt als es noch Röhrenmonitore gab. Auch Helvetica und Arial sind keine besonders guten Schriften zum Lesen. Und dann sollte am Ende auch die generische
sans-serifnicht fehlen, sonst wird auf Systemen, wo weder Verdana noch Helvetica noch Arial installiert ist, die Standardschriftart des Browsers verwendet, und das ist (wenn die Nutzerïn die Einstellung nicht geändert hat) eine Serifenschrift (i.d.R. Times New Roman).😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
erstmal vielen Dank an alle. Vorneweg aber nochmal zur Klarstellung. Das ist nur ein lokales Inhaltsverzeichnis für die auf meine Platte runtergeladenen podcast's. Also, ich stelle das nicht online. Der Grund ist einfach: Nach mehr als 100 podcast's weiss ich nicht mehr inhaltlich worum es in den meisten geht. Zu den COdeschnipseln: Das ist kein Witz jetzt, der Ursprung ist eine html-vorlage meines Banking-Programms. Ich habe jetzt leider die woche wenig Zeit. Mal sehen vielleicht bekomm ich es die woche ja noch hin. Also danke an alle vornweg schon mal. ps.: sieht unter chrome + firefox fast identisch aus, und ist, bis auf den fehlenden gefixten Tabellenkopf, auch sehr gut bedienbar und für mich völlig ausreichend.
-
da es keine neuen Antworten gibt, bitte als "erledigt" markieren, das Problem ist ja nicht gelöst, aber ist jetzt nicht so schlimm. allen Frohe Weihnachten und danke für die Hilfe
-
Hallo,
wenn du im css
thead { position: sticky }stehen hast, wäre es gut, wenn deine Tabelle auch einen <thead>-Bereich hat.
Gruß
Jürgen
-
-
-