HTML Tabelle im Handy/Tabletmodus zu breit?

Hallo,

ich habe eine Tabelle in meiner HTML-Webseite gemacht. Leider wenn ich das Fenster kleiner mache bzw. Handy/Tabletmodus öffne, ist die Tabelle zu weit, damit ich immer nach rechts scrollen muss. Bootstrap ist importiert, aber was muss ich noch im Code anderd schreiben? Die Tabelle hat vier Spalten und eine Reihe. Danke im Voraus!

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

08.09.2021, 10:38

HTML-Tabellen sind generell nicht responsiv.

Ein paar Optionen:

Du packst die Tabelle in einen scrollbaren Container. Bootstrap hat dafür schon Klassen in petto (siehe Responsive Tables).
Du baust dir eine Tabelle mit Blockelementen (wie div) und einem CSS Grid. Den semantischen Ausdruck kannst du auf diese Weise aber nicht herstellen. Du müsstest schauen, ob du aria-Attribute für Assoziationen nutzen kannst.
Verwende eine Bibliothek wie Tablesaw.
Mache mit JavaScript Spalten ein-/ausklappbar oder schau, ob es reicht, die Breite je Spalte zu verringern.

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

08.09.2021, 10:35

Schau dir die Responsive Tables von Bootstrap an:

https://getbootstrap.com/docs/5.1/content/tables/#responsive-tables

Die Tabelle muss dann zwar immer noch gescrollt werden, allerdings wächst damit nicht deine ganze Seite auf dem Handy in die Breite.

Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

08.09.2021, 09:46

geht mit tabellen nicht . musst du mehrere draus machen und die hintereinander packen so das sie sich dann untereinander legen können , oder gleich ein anderes konzept wählen (javascript) .

Ähnliche Fragen

HTML Tabelle zweifarbig?

Hallo allerseits,

wie kann ich in einer html Tabelle jeder Zelle die Farbe zuweisen z.B habe ich zwei Reihen, Rechts und Links, wie kann ich alle linken blau machen und alle rechten rot?

...zur Frage

Webseite scrollen verhindern?

Hallo ich möchte auf meiner Webseite das Scrollen zur Seite auf dem Handy verhindern, die einzige Möglichkeit die ich gefunden habe hat leider auch die Schieberegler deaktiviert!

...zur Frage

HTML, 2 Bilder in einer Reihe?

Hallo Leute,

Ich wollte gerade zwei Bilder in eine Reihe bringen. Des erste Bild auf die linke Seite zu bekommen und das zweite auf die rechte zu schieben, habe ich hinbekommen. Jetzt ist nur noch das Problem, dass die Bilder nicht nebeneinander, sondern untereinander sind.

Was muss ich hinzufügen, dass die Bilder in einer Reihe sind?

Pastebin.com/gccrXskr

...zur Frage

Wie fixiert man in einer Tabelle die Spaltenbreite?

Ich möchte, dass trotz Herausnahme von Textteilen in einer Tabellenspalte, die Spalte genauso breit bleibt, sich nicht zusammenzieht.

...zur Frage

HTML Banner auch beim scrollen an der gleichen stelle lassen?

Hallo,

Welchen Befehl muss ich eingeben, damit ich ein Banner habe das unten an meiner Webseite bleibt egal ob ich hoch oder runderscrolle, se soll immer am Bildschirmrand unten hängen und sich von dort wegbleiben.

Vielleicht kann mir ja auch jemand einen fertigen Quellcode geben. Und wo muss ich den Befehl Eingeben?

...zur Frage

Hilfe Bootstrap - Tabellen nebeneinander responsive?

https://jsfiddle.net/7dva5ybj/

Hilfe ich komme nicht weiter, ich möchte die x tabellen immer nebeneinander haben und nur den tbody scrollen können. es verschiebt sich immer

...zur Frage

Bilder tabellarisch anordnen?

Hallo,

wie ordne ich Bilder (die ich über einen externen Link bekomme) tabellarisch an, dass ich immer z.B. 5 in einer Reihe habe? Mache ich das über HTML oder CSS und wenn ja, wie lauten die Befehle dafür? Eine Tabelle anlegen über HTML bringt ja nicht viel oder? Oder kann ich da den Link von dem ich die Bilder bekomme einbeziehen?

Danke schon mal im voraus

Liebe Grüße Irgendwer1501

...zur Frage

HTML input ausgeben?

Hallo Community,

ich habe einen Code für eine Webseite mit HTML geschrieben.

Nun ist es so, das ich den input von vier Feldern, welche sich oben auf der Webseite befinden, unten auf der Webseite angezeigt haben möchte. Ich habe schon viele Möglichkeiten im Internet gefunden, aber keine wollte so richtig funktionieren. Kann mir hier jemand bei meinem Problem helfen?

Bei dem Code kann ich euch nur einen Ausschnitt, nämlich den mit den betreffenden Teilen reinschicken, da die Frage sonst zu lang ist.

MfG Kuchenmonster31

Teilcode:

Feedbackwebsite
<form class="Formular" action="datenbank für website.py" method="post">
  Vorname:
  <input type="text" name="vorname" size="30" maxlength="50">
</form>
<!-- Nachname -->
<form class="Formular" action="datenbank für website.py" method="post">
  Nachname:
  <input type="text" name="nachname" size="30" maxlength="50">
</form>
<!-- Fedback für Coding School -->
<form class="Formular" action="datenbank für website.py" method="post">
  Feedback für die<br> Coding School:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Feedback für Website -->
<form class="Formular" action="datenbank für website.py" method="post">
  Anmerkung zur <br> Website:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Button damit die eingabe unten auf der Website angezeigt wird: -->
<button class="Button">Formular abschicken</button>
<h4 class="Ausgabe">Ausgabe:</h4>

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Wie kann man eine Tabelle in Wordpress, in mobiler Ansicht so einstellen, dass 2 Reihen angezeigt werden anstatt eine?

Hallo, meine Tabelle in Wordpress sieht in mobiler Ansicht unschön aus, weil nur eine Reihe angezeigt wird, sie müssen aber mindestens zwei reihen beinhalten.

Ich bin mir sicher das es im CSS Code oder im HTML Code einstellbar ist. Weiß jemand mehr?

...zur Frage

wie mit css , html oder php bildgröße einstellen?

ich habe ne webseite auf der andere leute bilder hochladen können, diese bilder müssen letztenendes immer genau gleich groß sein, wie mach ich das mit einer der folgenden möglichkeiten?

Bild direkt nach upload mit php irgenwie beschneiden und quadratisch machen
mit css quadratisch machen sodass ein stück links und rechts fehlt
mit css quadratisch machen ohne dass links und rechts was fehlt sondern oben und unten ein weißer rand ist

aber das bild darf auf keinen fall verzogen sein oder so

...zur Frage

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zur Frage

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zur Frage

Wie kann ich bei einer Html/CSS Website einstellen, wie weit ich nach unten scrollen kann?

Habe leider das Problem, dass ich meine HTML-Webseite sehr weit nach unten scrollen kann. Jedoch will ich das selber einstellen. Ich bitte um Hilfe!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen