mrroyal
Goto Top

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

Content-Key: 583622

Url: https://administrator.de/contentid/583622

Ausgedruckt am: 28.03.2024 um 22:03 Uhr

Mitglied: wiesi200
wiesi200 01.07.2020 um 15:18:07 Uhr
Goto Top
Hallo,

in etwa so?
https://www.jqueryscript.net/demo/collasible-responsive-smartable/

Such mal nach Responive Table. Gibt einige fertige JavaScript Plugins
Mitglied: 144705
144705 01.07.2020 aktualisiert um 16:59:59 Uhr
Goto Top
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
<!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>
Mitglied: MrRoyal
MrRoyal 03.07.2020 um 18:02:20 Uhr
Goto Top
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
Mitglied: 144705
Lösung 144705 03.07.2020 aktualisiert um 18:19:57 Uhr
Goto Top
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. "transitionDuration":"0.4s"
Weißt du woran das liegen kann?
Welcher Browser? Nimm mal die aktuelle Masonry Version
https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js

Guckst du
https://masonry.desandro.com/