質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

10816閲覧

複雑なテーブルレイアウトをどう実装していいか分からない

ludient

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/25 05:00

編集2022/01/12 10:55

イメージ説明

添付した画像のように、行や列の高さが違うテーブルのようなレイアウトを、どうマークアップしてどうcssでスタイリングしていいのかがさっぱり分かりません…
colspanやrowspanを使ってみたのですが、画像のようなレイアウトにはなりませんでした。
このような場合、どのように記述するのが一番適切なのでしょうか?

もしtableタグでの実装が適さない場合、tableタグでの実装にはこだわりません。


htmlのマークアップはこちらのテーブルジェネレーターを使用して
生成されたコードにcssで、
cellクラスに対して高さを設定しようとしてみましたがうまくいきませんでした。

html

1<table> 2 <tbody> 3 <tr> 4 <td rowspan="5"></td> 5 <td></td> 6 <td></td> 7 <td class="cell" rowspan="2"></td> 8 </tr> 9 <tr> 10 <td></td> 11 <td></td> 12 </tr> 13 <tr> 14 <td></td> 15 <td></td> 16 <td class="cell" rowspan="2"></td> 17 </tr> 18 <tr> 19 <td></td> 20 <td></td> 21 </tr> 22 <tr> 23 <td></td> 24 <td></td> 25 <td class="cell"></td> 26 </tr> 27 </tbody> 28</table>

css

1table,th,td { 2border-collapse: collapse; 3border: solid 1px #000; 4} 5.cell { 6height: 150px; 7}

どなたかお知恵をおかりできれば幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/25 05:10

具体的に試されたHTMLおよびCSSを質問文に追記いただいたほうが回答を得られやすいと思います。
guest

回答3

0

3列目の4行目のデータと4列目の1行目や3行目のデータが
行の高さを決められないですね。

この手の処理をするには全行に明示的に高さを指定するか
ダミーでもう一列増やすかでしょう

CSS

1table{border-collapse:collapse;} 2td{border:1px solid #000000;} 3td.lasttd{border:0px solid;}

HTML

1ここに言語を入力 2``` 3<table> 4<tr> 5<td rowspan=7>1</td> 6<td>2</td> 7<td>3</td> 8<td rowspan=4>4</td> 9<td class="lasttd">&nbsp;</td> 10</tr> 11<tr> 12<td>5</td> 13<td>6</td> 14<td class="lasttd">&nbsp;</td> 15</tr> 16<tr> 17<td>7</td> 18<td>8</td> 19<td class="lasttd">&nbsp;</td> 20</tr> 21<tr> 22<td rowspan=3>9</td> 23<td rowspan=3>10</td> 24<td class="lasttd">&nbsp;</td> 25</tr> 26<tr> 27<td>11</td> 28<td class="lasttd">&nbsp;</td> 29</tr> 30<tr> 31<td rowspan=2>12</td> 32<td class="lasttd">&nbsp;</td> 33</tr> 34<tr> 35<td>13</td> 36<td>14</td> 37<td class="lasttd">&nbsp;</td> 38</tr> 39</table> 40``` 41 42古いブラウザを無視して良いなら 43td:last-childなどの疑似セレクタを利用する手もあります

投稿2016/09/26 02:02

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Table でレイアウトするのは推奨されていないのと、案外難しかったりします。(幅高さ固定のために1pxの透過GIFを使うようなテクニックなどもある)

なので、flex でどうでしょう。モダンブラウザなら問題なし。floatなどでレイアウトを作るのもできたほうが良いですが、ブラウザ対応の問題もほぼなくなりかけているのでお勧めです。

CSS

1div { 2 box-sizing: border-box; 3 min-height: 1vh; 4 min-width: 1vw; 5} 6 7.root { 8 border: 1px solid #ddd; 9 height: 90vh; 10 width: 90vw; 11} 12.root .wrap { 13 height: 100%; 14} 15 16.wrap { 17 display: flex; 18} 19.wrap > .left { 20 flex-basis: 5%; 21 flex-grow: 0; 22} 23.wrap > .right { 24 flex-basis: calc(100% / 3); 25 flex-grow: 0; 26} 27.wrap > .center { 28 flex-grow: 1; 29} 30.wrap > div:not(:last-child) { 31 border-right: 1px solid #ddd; 32} 33 34.v { 35 display: flex; 36 flex-direction: column; 37 height: 100%; 38} 39.v > div { 40 flex-grow: 1; 41} 42.v > div:not(:last-child) { 43 border-bottom: 1px solid #ddd; 44} 45 46.item.main { 47 flex-basis: 70%; 48} 49.item .left { 50 flex-basis: 20%; 51}

HTML

1<div class="root wrap"> 2 <div class="left"></div> 3 <div class="center"> 4 <div class="v"> 5 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div> 6 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div> 7 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div> 8 <div class="item main"><div class="wrap"><div class="left"></div><div class="right"></div></div></div> 9 <div class="item"><div class="wrap"><div class="left"></div><div class="right"></div></div></div> 10 </div> 11 </div> 12 <div class="right"> 13 <div class="v"> 14 <div class="box"></div> 15 <div class="box"></div> 16 <div class="box"></div> 17 </div> 18 </div> 19</div>

【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿2016/09/25 07:54

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

とりあえずそのジェネレータを使って作ってみました。
おそらくは2列目3列目のセルを3つ結合させてる部分で分かりづらかったのかなと思います。
なので分かりやすいように結合部分に補足のcssを足してあります。

css

1table , td, th { 2 border: 1px solid #595959; 3 border-collapse: collapse; 4} 5td, th { 6 padding: 3px; 7 width: 30px; 8 height: 25px; 9} 10td[rowspan="3"] { 11 height: 100px; 12}

html

1<table> 2 <tbody> 3 <tr> 4 <td rowspan="7"></td> 5 <td></td> 6 <td></td> 7 <td rowspan="4"></td> 8 </tr> 9 <tr> 10 <td></td> 11 <td></td> 12 </tr> 13 <tr> 14 <td></td> 15 <td></td> 16 </tr> 17 <tr> 18 <td rowspan="3"></td> 19 <td rowspan="3"></td> 20 </tr> 21 <tr> 22 <td></td> 23 </tr> 24 <tr> 25 <td rowspan="2"></td> 26 </tr> 27 <tr> 28 <td></td> 29 <td></td> 30 </tr> 31 </tbody> 32</table>

投稿2016/09/25 06:19

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問