Ich versuche herauszufinden, wie man ein Rasterlayout wie das Bild in diesem Beitrag mit HTML und CSS erstellt. Ich habe Bootstrap in meinem Projekt installiert, verwende es aber nicht für sein Grid-System, da es nur bis zu 12 Spalten reicht. In einigen Fällen wird es mehr als 12 Spalten geben.Erstellen einer komplexen Excel-ähnlichen Gitterstruktur mit HTML und CSS
Hier sind die CSS-Klassen Ich habe mir zu helfen:
.x-grid {
width: 3000px;
}
.x-row {
width: 100%;
}
.x-cell {
float: left;
border: 1px solid black;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.x-cell span {
display: block;
}
Sehen Sie bitte diesen jsFiddle für meinen ersten Versuch.
Ich habe Probleme mit dem Hinzufügen von Zeilen innerhalb von Zeilen, um das Aussehen im Bild zu erreichen. Zum Beispiel müssen drei Zeilen innerhalb der Primary Item Reihe stehen, die eine Höhe der Primary Reihe geteilt durch 3 haben. Dann 5 Reihen in jeder dieser Reihen. Ich kann es einfach nicht bekommen, vielleicht sind es meine CSS Klassen sind nicht richtig eingerichtet, um so etwas zu tun.
Bitte beachten Sie, dass der Grund für das .ws-Grid eine Breite von 3000px hat, da es sich um eine Zahl handelt, die sich dynamisch ändert, basierend darauf, wie viele Spalten im Raster enthalten sein müssen, damit der Inhalt gut aussieht. Und ja, der Benutzer muss scrollen.
Welche Art von _data_ werden Sie eventuell damit anzeigen? Es könnte ein Fall sein, in dem die Verwendung von HTML-Tabellenelementen am sinnvollsten ist. – CBroe
Sie könnten versuchen [Tabelle anzeigen] (http://www.mattboldt.com/kicking-ass-with-display-table/). Funktioniert sehr ähnlich dem 'table'-Element, beschränkt Sie jedoch darauf, 'colspan' oder' rowspan' nicht verwenden zu können. –
Ist es nur für die Anzeige von Daten oder auch für die Bearbeitung durch den Benutzer? Sie würden dann besser eine JS-Bibliothek von ausgefallenen Komponenten oder ein Skript wie [HandsonTable] (http://stackoverflow.com/questions/tagged/handsontable) verwenden (sie lügen nicht, wenn sie "Excel-like" sagen, obwohl Sie es brauchen die Pro-Version für verschachtelte Header) – FelipeAls