ここから本文です

tableレイアウトについて質問をお願いします。 現在下のURLようなtableを制作し...

war********さん

2017/12/2312:19:08

tableレイアウトについて質問をお願いします。

現在下のURLようなtableを制作していますが、次の3点が上手くいきません。

http://muko.hiho.jp/table/

1点目はレスポンシブです。
スマートフォンではプラン1・プラン2・プラン3をコンテンツと料金の上に持ってきて縦で表示させたいです。
参考のイメージ画像を添付します。
最悪そのようにならなくてもスマートフォンで閲覧した際に綺麗にレスポンシブ表示ができたらいいのですが。

2点目はGoogle Chromeやスマートフォンで閲覧した際に、プラン3の下のボーダーがtableを囲っているボーダーではなく、白いドットのボーダーで表示されてるので、紺色のボーダーにしたいです。

3点目は各行を区切っているボーダーがtableの枠の上に重なっていて見栄えが悪いため、重なっている部分をなくしたいです。

特に1点目のレスポンシブがお手上げ状態のため、tableのレスポンシブ化だけでも教えていただきたいです。
何卒宜しくお願い致します。

data-label,ボーダー,Google Chrome,price&quot,スマホ,td class,td&gt

閲覧数:
71
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2017/12/2407:46:42

■■■ テーブルのレスポンシブ化 ■■■

これは、
メディアクエリで <th>, <td> を「display:block」に切り替えるだけ。

ただ、
「コンテンツ〇」と料金を2つのセルに分けていると、
「display:block」で崩したときに、
「コンテンツ〇」と料金も縦に並んでしまう。

「コンテンツ〇」と料金のセルを横に並べたままで、
レスポンシブを実現するには、
この2つのセルを1つのセルにまとめないといけない。

配置とタグ記述の便を考えると、
「コンテンツ〇」の部分は
:before のような擬似要素で表示させて float で左に、
料金はふつうに「text-align」で右に表示するのが簡単。

ここで、
質問のテーブルで引っかかることが・・・・

テーブルの階層の中で「コンテンツ1」だけが
「プラン1」「プラン2」「プラン3」と同じ階層になっている。
普通に考えれば「コンテンツ1」は、
「コンテンツ2」「コンテンツ3」・・・と同じ階層になるべきじゃないか?
その辺も考えてテーブルを作り直してみたんで、後述のソースを参考に。

あと、
クラス名で「プライス」の英語の綴りが「place」と間違ってたんで、
これも「price」に直しておいた。



■■■ ボーダーがおかしい件 ■■■

<table> が「border-collapse:collapse」の状態で、
<table> と <th> や <td> に枠線を設定すると、
<th> や <td> の枠線が <table> の枠線の上に重なってしまう。
「プラン3」の下の枠線が白い点線になっているのも、
各行を区切っている枠線が <table> の枠線にめり込んでるのも、
「border-collapse:collapse」の状態で
<table> と <th>, <td> の両方に枠線を設定しているから。

枠線の指定を <th>、<td> のみにして、
セルごとに上下左右の枠線をうまく組み合わせるか、
「border-collapse:separate」にして外枠と内枠を別々に組むか、
どっちかで解決する。

「border-collapse:separate」にして外枠・内枠を分ける方が、
簡単だと思う。



■■■ ソースコード例 ■■■


【 HTML 】

<table>
<thead>
<tr>
<th>項目</th>
<th>料金</th>
</tr>
</thead>
<tbody>
<tr>
<td class="price" data-label="コンテンツ1" colspan="2">10,000円</td>
</tr>
<tr class="plan_head">
<td class="plan" rowspan="3">プラン1</td>
<td class="price" data-label="コンテンツ2">100,000円</td>
</tr>
<tr class="plan_item">
<td class="price" data-label="コンテンツ3">200,000円</td>
</tr>
<tr class="plan_item">
<td class="price" data-label="コンテンツ4">300,000円</td>
</tr>
<tr class="plan_head">
<td class="plan" rowspan="3">プラン2</td>
<td class="price" data-label="コンテンツ5">400,000円</td>
</tr>
<tr class="plan_item">
<td class="price" data-label="コンテンツ6">500,000円</td>
</tr>
<tr class="plan_item">
<td class="price" data-label="コンテンツ7">598,000円</td>
</tr>
<tr class="plan_head">
<td class="plan" rowspan="2">プラン3</td>
<td class="price" data-label="コンテンツ8">600,000円</td>
</tr>
<tr class="plan_item">
<td class="price" data-label="コンテンツ9">700,000円</td>
</tr>
</tbody>
</table>


【 CSS 】

@charset "utf-8";

table{
margin: 40px auto;
}

th, td{
box-sizing: content-box;
vertical-align: middle;
}

th{
padding: 4px 40px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;
}

tr th:last-child{ text-align: right }

td{
padding: 8px 20px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;
}

td.price{
text-align: right;
}

td[ data-label ]:before{
content: attr( data-label );
float: left;
}


@media ( min-width: 960px ){

table{
width: 960px;
border-collapse: separate;
border-spacing: 0px;
border: solid 1px #0f0f5b;
background: #a2b0c7;
color: #000;
}

th{
border-bottom: solid 2px #0f0f5b;
background: #725011;
color: #fff;
font-size: 34px;
}

tr th:first-child{ width: 320px }

tr.plan_head td{
border-top: solid 2px #fff;
}

tr.plan_item td{
border-top: dotted 2px #fff;
}

td{
font-size: 34px;
}

td.plan{
border-right: solid 1px #fff;
}

}/* ( 960px~ ) */


@media screen and ( max-width: 959px ){

table{
border-collapse: collapse;
background: transparent;
}

tr, th, td{
display: block;
}

thead tr{
padding-bottom: 4px;
border-bottom: solid 1px #000;
}

tr th:first-child{ display: none }

th{
border-bottom: solid 2px #000;
background: #725011;
color: #fff;
}

th:before{
content: "項目";
float: left;
}

td{
border: none;
border-bottom: solid 1px #000;
}

td.plan{
border-top: solid 1px #000;
border-bottom: solid 2px #000;
background: #a2b0c7;
}

}/* ( ~959px ) */


@media ( min-width: 770px ) and ( max-width: 959px ){

table{ width: 770px }

th, td{ font-size: 26px }

}/* ( 770px ~ 959px ) */


@media ( min-width: 601px ) and ( max-width: 769px ){

table{ width: 601px }

th{ font-size: 26px }

td{ font-size: 25px }

}/*( 601px ~ 769px ) */

@media ( min-width: 481px ) and ( max-width: 600px ){

table{ width: 481px }

th, td{ font-size: 20px }

}/* ( 481px ~ 600px ) */

@media ( max-width: 480px ){

table{ width: 360px }

th, td{ font-size: 20px }

}/* ( ~ 480px ) */

質問した人からのコメント

2017/12/24 23:02:52

詳しい説明に加えサンプルのソースコードまでご丁寧にありがとうございました。
お恥ずかしながらdata-labelというものを初めて知り、大変勉強になりました。
無事レスポンシブ対応のテーブルが組めました。
本当にありがとうございます!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる