0
この投稿の画像のようにグリッドレイアウトをHTMLとCSSで作成する方法を理解しようとしています。私は自分のプロジェクトにブートストラップをインストールしましたが、グリッドシステムには使用していないのは12列までしかないからです。場合によっては、12個以上の列があります。HTMLとCSSで複合体を作成するグリッド構造を作成する
は、ここで私は私を助けるために作成したCSSクラスです：
.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;
}
が私の最初の試みのため、このjsFiddleを参照してください。
イメージ内の外観を実現するために、行内に行を追加する際に問題があるようです。たとえば、プライマリアイテムの行には、プライマリ行の高さが3で割られた3つの行が必要です。次に、それぞれの行の5つの行。私はそれを得ることができません。多分それは私のCSSクラスですこのようなことをするために適切に設定されていません。
.ws-gridの幅は3000pxです。これは、コンテンツをうまく表示するためにグリッドに必要な列数に基づいて動的に変更される数値です。そしてはい、ユーザーはスクロールする必要があります。
最終的にどのような種類の_data_を表示しますか？実際のHTMLテーブル要素を使用することが最も理にかなっている場合があります。 – CBroe
[Display Table]（http://www.mattboldt.com/kicking-ass-with-display-table/）を試すことができます。 'table'要素と非常によく似ていますが、' colspan'や 'rowspan'を使用できないように制限しています。 –
データの表示のみですか、またユーザーからの編集も可能ですか？あなたは、あなたが必要としているが、 "Excelのような"と言ったときにうそをつくことはない、ファンシーなコンポーネントのJSライブラリや[HandsonTable]（http://stackoverflow.com/questions/tagged/handsontable）ネストされたヘッダーのプロバージョン） – FelipeAls