Scrollbare Table Cell
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hi, ich habe eine HTML Tabelle die MySQL Content anzeigt. Ich würde gerne haben dass die einzelnen tds und ths scrollbar sind (mit einem maximalen width). Wie Stelle ich das an?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also eine Scrollbar in einer Tabellenzelle? Probiert habe ich es noch nicht, aber die hier
http://www.ohne-css.gehts-gar.net/0064.php
dargestellte Möglichkeit für div-Elemente klappt bestimmt auch für Elemente einer Tabelle.
Beitrag zuletzt geändert: 11.7.2020 16:02:46 von mein-wunschname -
Für Tabellen haben Brauser einen speziellen Algorithmus zur Darstellung.
Selbst mit table-layout: fixed sind die Regeln eher kompliziert, bei Konflikten entscheidet der Brauser letztlich eigenmächtig über die Darstellung.
Daher ist es knifflig, das ohne Tricks sicher bei allen Brausern hinzubekommen, weil deren Algorithmen jeweils anders sein können, die Darstellungsbereiche bei jedem Nutzer anders etc.
Was ziemlich problemlos geht: In den betroffenen Zellen ein weiteres Element unterbringen, sofern semantisch kein anderes paßt, eben ein div, in welchem der gewünschte Inhalt steht, dann kann zum Beispiel etwas in der Art solide funktionieren:
table.fix td div {width: 10em; height:10em; overflow: auto}
Die Algorithmen sind allerdings hinsichtlich guter Lesbarkeit der Inhalte von Tabellen optimiert.
Von daher ist es zumeist suboptimal für das Publikum, wenn da mehr als Rahmen, Randabstände dekorativ festgelegt werden.
Man sollte sich also schon sicher sein, daß es inhaltlich wirklich angemessen ist, eine Tabelle zu verwenden, also das Element caption verwenden, thead, tfoot, tbody, Rahmen anzeigen lassen.
Man sollte auch wirklich sicher sein, daß derart provozierte Rollbalken wirklich sinnvoll für das Publikum sind, keine Zugänglichkeitsprobleme verursachen, zumeist wird etwa bei Text sehr ungern horizontal gerollt ;o)
Handelt es sich hingegen um reine Dekoration, wenn Inhalte nebeneinander angeordnet werden sollen, werden keine Tabellen verwendet, stattdessen normale Blockelemente und geeignetes CSS. -
Hi,
also ganz früher (lang lang her) hat man es leicht mit Frames lösen können. Insegsamt nicht die schönste aber eine der einfachsten Lösungen.
Aber anbei mal ein Lösungsansatz aus Stackoverflow:
https://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-table
Hoffe du verstehst es, da in Englisch! -
Ohne es ausprobiert zu haben:
Setzt man für alle Tabellenelemente etwas wie display:block, sollten all diese Elemente auch ohne Sonderregeln für Tabellenelemente dekorierbar sein.
Gibt also immer reichlich Möglichkeiten, zum Ziel zu kommen ;o) -
Tabellen sind im Responsive Webdesign - und das ist State of the Art - eine echte Herausforderung. Ich habe hier https://timebandit.lima-city.de/mehralsnurradio/ eine Beispieltabelle mit scrollbaren Zellen erstellt. Für mobile Geräte eignet sich diese Lösung allerdings nicht.
lg,
timebandit -
Ich bräuchte das Ganze für Android Webview bzw. Android Chrome. Die Tabelle an sich ist übrigens schon scrollbar, es geht um den Inhalt. Mit divs und display block hat das Ganze übrigens nicht funktioniert.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage