4
Tabelle mit dynamischer Ausrichtung
Hallo zusammen,
kann man in HTML oder JavaScript eine Tabelle so erstellen, dass diese sich automatisch ausrichtet.
Z. B.
anfangs gibt es 2 Rows und 4 Columns und sobald das Fenster kleiner wird, soll sie sich zu 4 Rows und 2 Columns ändern.
Oder aber das Fenster wird größer, dann können alle Inhalte in 1 Row und 8 Columns angezeigt werden.
Also eine am Fenster (div) angepasste Tabelle.
Geht sowas und wenn ja, wie mach ich das?
Danke
kann man in HTML oder JavaScript eine Tabelle so erstellen, dass diese sich automatisch ausrichtet.
Z. B.
anfangs gibt es 2 Rows und 4 Columns und sobald das Fenster kleiner wird, soll sie sich zu 4 Rows und 2 Columns ändern.
Oder aber das Fenster wird größer, dann können alle Inhalte in 1 Row und 8 Columns angezeigt werden.
Also eine am Fenster (div) angepasste Tabelle.
Geht sowas und wenn ja, wie mach ich das?
Danke
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 583622
Url: https://administrator.de/contentid/583622
Ausgedruckt am: 25.11.2024 um 14:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo,
in etwa so?
https://www.jqueryscript.net/demo/collasible-responsive-smartable/
Such mal nach Responive Table. Gibt einige fertige JavaScript Plugins
in etwa so?
https://www.jqueryscript.net/demo/collasible-responsive-smartable/
Such mal nach Responive Table. Gibt einige fertige JavaScript Plugins
Lässt sich heute auch komplett mit CSS machen
https://www.mediaevent.de/css/grid.html
Geht natürlich auch mit etwas Animation wenn man das will
https://www.mediaevent.de/css/grid.html
Geht natürlich auch mit etwas Animation wenn man das will
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic grid float</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<style type="text/css">
.grid{width:auto}
.specitem {
width: 150px;
height: 150px;
background-color:#CCC;
margin:5px;
font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
text-align:center;
line-height: 150px;
font-size: 4em;
font-weight:bold;
color:#DADADA;
}
.specitem:nth-child(2) {
width: 310px;
height: 310px;
line-height:310px
}
</style>
<body>
<div class="grid" data-masonry='{"itemselector":".specitem","columnWidth":160,"transitionDuration":"0.4s"}'>
<div class="specitem">1</div>
<div class="specitem">2</div>
<div class="specitem">3</div>
<div class="specitem">4</div>
<div class="specitem">5</div>
<div class="specitem">6</div>
<div class="specitem">7</div>
<div class="specitem">8</div>
<div class="specitem">9</div>
<div class="specitem">10</div>
<div class="specitem">11</div>
<div class="specitem">12</div>
<div class="specitem">13</div>
<div class="specitem">14</div>
<div class="specitem">15</div>
</div>
</body>
</html>
Danke latavia,
das Grid soweit ganz gut, bis auf die Sache, das sich die Boxen erst anpassen sobald man die Fenstergröße ändert.
Anfangs beim ersten laden der Seite reiht er alles untereinander an und dann ändere ich die Fenstergröße und erst dann schiebt sich alles in Position.
Weißt du woran das liegen kann?
Danke
das Grid soweit ganz gut, bis auf die Sache, das sich die Boxen erst anpassen sobald man die Fenstergröße ändert.
Anfangs beim ersten laden der Seite reiht er alles untereinander an und dann ändere ich die Fenstergröße und erst dann schiebt sich alles in Position.
Weißt du woran das liegen kann?
Danke
Zitat von @MrRoyal:
Danke latavia,
das Grid soweit ganz gut, bis auf die Sache, das sich die Boxen erst anpassen sobald man die Fenstergröße ändert.
Anfangs beim ersten laden der Seite reiht er alles untereinander an und dann ändere ich die Fenstergröße und erst dann schiebt sich alles in Position.
Nö, geht hier problemlos. Du kannst das Transition-Duration im Code an deine Bedürfnisse anpassen. Danke latavia,
das Grid soweit ganz gut, bis auf die Sache, das sich die Boxen erst anpassen sobald man die Fenstergröße ändert.
Anfangs beim ersten laden der Seite reiht er alles untereinander an und dann ändere ich die Fenstergröße und erst dann schiebt sich alles in Position.
"transitionDuration":"0.4s"Weißt du woran das liegen kann?
Welcher Browser? Nimm mal die aktuelle Masonry Versionhttps://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.jsGuckst du
https://masonry.desandro.com/
