方法-サイドバイサイドテーブル
CSSを使用してサイドバイサイドテーブルを作成する方法を学びます。
テーブルを並べて配置する方法
float
CSSプロパティを使用してサイドバイサイドテーブルを作成する方法:
例
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
flex
CSSプロパティを使用してサイドバイサイドテーブルを作成する方法:
例
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
注: Flexboxは、Internet Explorer10以前のバージョンではサポートされていません。フロートまたはフレックスを使用するかどうかはあなた次第です。ただし、IE10以下のサポートが必要な場合は、floatを使用する必要があります。
ヒント:フレキシブルボックスレイアウトモジュールの詳細については、CSSフレックスボックスの章をお読みください。
応答性を追加する
上記の例は、2つの列がページのスペースを占有しすぎるため、モバイルデバイスでは見栄えがよくありません。モバイルデバイスで2列のレイアウトから全幅のレイアウトに移行するレスポンシブテーブルを作成するには、次のメディアクエリを追加します。
例
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
ヒント:テーブルのスタイルを設定する方法の詳細については、 CSSテーブルのチュートリアルにアクセスしてください。
ヒント: floatプロパティの詳細については、CSSFloatチュートリアルにアクセスしてください。
ヒント: flexプロパティの詳細については、CSSFlexboxチュートリアルにアクセスしてください。