stahlwanne: Tabellenüberschrift fixieren

Beitrag lesen

SELF-Forum

Tabellenüberschrift fixieren

stahlwanne (Versionen)
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln