mrroyal
Jul 01, 2020
view1202
view4
0
Goto Top

Tabelle mit dynamischer Ausrichtung

GermansolvedQuestionWeb DevelopmentDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 583622

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

Printed on: April 16, 2024 at 08:04 o'clock

4 Comments
Latest comment
Goto Top
Member: wiesi200
wiesi200 Jul 01, 2020 at 13:18:07 (UTC)
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 Jul 01, 2020 updated at 14:59:59 (UTC)
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>
Member: MrRoyal
MrRoyal Jul 03, 2020 at 16:02:20 (UTC)
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
Solution 144705 Jul 03, 2020 updated at 16:19:57 (UTC)
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/
GermansolvedQuestionWeb DevelopmentDevelopment