Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

fixxer Tabellenkopf, scrollbarer Inhalt

Empfohlene Antworten

Veröffentlicht

hi,

ich überleg grad wie ich die kopfzeile (spaltennamen) einer tabelle immer am oberen bildschirmrand behalte, im tabelleninhalt aber beliebig nach oben und unten scrollen kann. für beides hab ich ne eigene funktion die ich in frames setzen könnte, aber vllt gibt`s ja noch ne schönere lösung?

---------------------

Name | Vorname | Ort

---------------------

---------------------

Wurst| Hans | town >

zeiss | Carl | city > <-- scrollbar

kuhn | peter | stadt >

entweder habe ich dein Problem nicht richtig verstanden, aber das die Tabelle ganz oben ist, kannst du doch leicht über CSS lösen.

wenn ich bei tausenden einträgen runterscrolle verschwindet logischerweise der kopf mit den spaltennamen und genau das soll nicht passieren.

ich bezweifle, ob es von der performance und übersichtlichkeit sinn macht, tausende datensätze zu laden und anzuzeigen.

wie wärs, wenn du die zeilen zum seitenweise in, sagen wir mal, 25er schritten durchblättern machst?

s'Amstel

wenn ich bei tausenden einträgen runterscrolle verschwindet logischerweise der kopf mit den spaltennamen und genau das soll nicht passieren.

dann hatte ich dich wohl wirklich falsch verstanden :)

Du meinst quasi so eine Funktion wie in Excel.

s'Amstel, ne blätterfunktion hab ich schon, die tabelle ist die alternativansicht dazu *gg*:marine

funktioniert im IE, leider nicht im FF; dafür kann FF aber div-Container mit position: fixed richtig darstellen ;)

Beispiel-Code (net schön, net sauber, funktioniert aber, eben kurz runtergeschrieben)

seite.html


<html >

<head>

    <title>Tabellenlayout TEST</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>


<body>


<table cellpadding="0" cellspacing="0">

    <tr>

        <td id="top" colspan="2"> 

	Überschrift

        </td>

    </tr>

    <tr>

        <td id="left">

            Menü<br />

        </td>

        <td>

            <div id="content">

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />

		foobar<br />


            </div>

        </td>


    </tr>

</table>


</body>

</html>

style.css

*

{

	font-family: Tahoma, Verdana, Arial;

	color: #ffffff;

	font-size: 10pt;

	text-decoration: none;

}


body 

{

	margin: 0px;

	overflow: hidden;

}


#top

{

	background-color: #232323;

	background-image: url("../Images/logo_top.jpg");

	height: 79px;

	overflow: hidden;

	font-size: 20px;

	font-decoration: bold;

	text-align: center;

}


#left

{

	background-color: #232323;

	width: 100px;

	vertical-align: top;

}



#content

{

	color: #424242;

	text-align: center;

	overflow: auto;

	position: static;

	height: 100%;

	width: 100%;

	padding: 20px;

}


table

{

	width: 100%;

	height: 100%;

}


cool danke jan.

http://www.homepage-total.de/css/scrollende-tabelle.php

ich hab grad nur schwierigkeiten das umzusetzen.


echo "<table ......>";

$tabellenkopf="<tr>";
for($i=0;$i<=25;$i++)
{
$tabellenkopf.= "<td>Feldname</td>";
}
$tabellenkopf.="</tr>";

for($i=0;$i<mysql_num_rows($result);$i++)
{
$tabelleninhalt.="<tr><td>Datensatz</td></tr>";
}

echo "<pre style='margin: 0px;'>";
echo $tabellenkopf;
echo "</pre>";

echo "<div style='height: 150px; overflow: auto;'>";
echo $tabelleninhalt;
echo "</div>";

echo "</table>";
[/PHP]

cool wär wenn ich die beiden arrays (?) in die zwei "container" packen könnte ohne viel umzuschreiben. ungefähr so wie oben versucht.

moep ist ja klar warum das bei mir nicht funktionieren kann ^^

im beispiel gibt es zwei tabellen die unabhängig von einander sind. bei mir schreib ich alles in eine, um für jeder spalte die richtige breite zu haben (feldname <-> spalteninhalt).

warum kann es nicht so einfach sein jan?


echo "<table cellpadding='0' cellspacing='0'>";
echo "<tr>";
echo "<td id='top'>";
echo $tabellenkopf;
echo "</td>";
echo "</tr>";

echo "<tr>";
echo "<td>";
echo "<div id='content'>";
echo $tabelleninhalt;
echo "</div>";
echo "</td>";
echo "</tr>";
echo "</table>";
[/PHP]

was genau funktioniert denn nicht, der Ansatz ist schon in Ordnung so,

allerdings müsstest du für die Daten in der Tabelle zwei geschachtelte Schleifen verwenden, weil du ja Spalten und Zeilen füllen musst.

also etwa so:


echo "<table border='1'>";


$tabellenkopf="<tr>";

for($i=0;$i<=3;$i++)

{

  $tabellenkopf.= "<th>Feldname $i</th>";

}

$tabellenkopf.="</tr>";


for($i=0;$i<=3;$i++)

{

	$tabelleninhalt .= "<tr>";

	for($j=0;$j<=3;$j++)

	{

		$tabelleninhalt .= "<td>Datensatz Zeile: $i Spalte: $j</td>";

	}

	$tabelleninhalt .= "</tr>";

}


echo "<pre style='margin: 0px;'>";

  echo $tabellenkopf;

echo "</pre>";


echo "<div style='height: 150px; overflow: auto;'>";

  echo $tabelleninhalt;

echo "</div>";


echo "</table>";

PS: Tabellenüberschriften übrigens mit th, nicht td ;)

na ja ich bekomm keine zwei sauberen container hin.. die höhe die ich im zweiten container (inhalt) angebe, wird als abstand zum oberen bildschirmrand genommen...und abgesehen von dem "abstand" hat sich nichts an meiner ansicht verändert.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.