【コピペOK!html+Css】Flexboxの料金表テーブル複数パターン

【html+Css】CopyOK! Flexbox Pricecard!

こんにちは。石油王です。今日は石油王が最速3分のコピペFlexboxの料金表テーブル複数バージョンをお届け。メッチャ便利じゃん。

とにかく時間がない!調整は後でする!そんなときのFlexbox料金表コピペソース作っておいたから!料金表って地味に時間がかかるでしょ?colspanとか焦るよね。適時調整して使ったらいいよ。
パソコンで3列、ipad以下では2列にしておいたから。

出来上がり予想図

Aプラン
¥12,000~
タイトルテキストテキストテキストテキスト
Aプラン
¥12,000~
テキストテキストテキストテキストテキスト
Aプラン
¥12,000~
タイトルテキストテキスト
タイトルテキストテキスト
Aプラン
¥12,000~
タイトルテキストテキスト
テキストテキスト
Aプラン
¥12,000¥12,000
テキストテキストテキストテキストテキスト




1.htmlコピペします

<div class="price_warp">
<table class="tbl_price">
<tbody>
<tr><th colspan="2">Aプラン</th></tr>
<tr ><td colspan="2" class="price_text">¥12,000~</td></tr>
<tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキストテキストテキストテキスト</td></tr>

</tbody>
</table>
<table class="tbl_price">
<tbody>
<tr><th>Aプラン</th></tr>
<tr><td class="price_text">¥12,000~</td></tr>
<tr><td class="price_text_small">テキストテキストテキストテキストテキスト</td></tr>
</tbody>
</table>
<table class="tbl_price">
<tbody>
<tr><th colspan="3">Aプラン</th></tr>
<tr ><td colspan="3" class="price_text">¥12,000~</td></tr>
<tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr>
<tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr>
</tbody>
</table>
<table class="tbl_price">
<tbody>
<tr><th colspan="3">Aプラン</th></tr>
<tr ><td colspan="3" class="price_text">¥12,000~</td></tr>
<tr><td rowspan="2" class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr>
<tr><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr>
</tbody>
</table>

<table class="tbl_price">
<tbody>
<tr><th colspan="2">Aプラン</th></tr>
<tr><td class="price_text">¥12,000</td><td class="price_text">¥12,000</td></tr>
<tr><td  colspan="2" class="price_text_small">テキストテキストテキストテキストテキスト</td></tr>
</tbody>
</table>
</div>   
  

2.Cssコピペします

石油王、油田しかわからないからもっと良いCssもあると思う。

.price_warp {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
  flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.tbl_price{width: calc(97%/3); margin: 0.5%;}
.tbl_price th { background: #eee;}
.tbl_price td,.tbl_price th{padding: .3em .2em;border: 1px solid #ddd;box-sizing: border-box;}
.tbl_price .price_text{text-align:center;font-weight:bold;font-size:120%;}
.tbl_price .price_text_small{font-size:80%;}
/*ipad以下*/
@media (max-width: 798px){
.tbl_price{width: calc(98%/2); margin: 0.5%;}
}




3.フォルダダウンロードも

flexboxのtable素材ダウンロードはこちら

主張の強いリンク作っておいたから、ちょっと買っとくと石油王嬉しい。売り上げは油田の維持に使うね。LINEスタンプ購入

The following two tabs change content below.

嫁の方

代表取締役かぴのんスタジオ
株式会社かぴのんスタジオ夫婦の嫁のほう。 webのデザイン&イラスト&コーディングまでが得意。写真は田舎のロケが大好き。富士山の樹海でよくキノコを追いかけています。 ご質問はこちら

ご質問はこちら