tableタグで作成したテーブルをカスタマイズしておしゃれにしようと試みようと思う
まずは、普通にテーブルを作ってみる
| 見出し1 | 見出し2 | 見出し3 | 見出し4 |
|---|---|---|---|
| データ1-1 | データ1-2 | データ1-3 | データ1-4 |
| データ2-1 | データ2-2 | データ2-3 | データ2-4 |
| データ3-1 | データ3-2 | データ3-3 | データ3-4 |
| データ4-1 | データ4-2 | データ4-3 | データ4-4 |
| データ5-1 | データ5-2 | データ5-3 | データ5-4 |
これをベースにテーブルをカスタマイズしていってみようと思う。。。
行の背景色をストライプにしてみる
奇数行と偶数行で背景色を変えておく。
また、カーソルが当たった行の背景色を変更するようにしました。
あとついでに中央揃えなど微調整しておく。
| 見出し1 | 見出し2 | 見出し3 | 見出し4 |
|---|---|---|---|
| データ1-1 | データ1-2 | データ1-3 | データ1-4 |
| データ2-1 | データ2-2 | データ2-3 | データ2-4 |
| データ3-1 | データ3-2 | データ3-3 | データ3-4 |
| データ4-1 | データ4-2 | データ4-3 | データ4-4 |
| データ5-1 | データ5-2 | データ5-3 | データ5-4 |
css
.stripe-table tbody tr:nth-child(2n) {
background: #eee;
}
.stripe-table tbody tr:hover {
background: rgb(217, 229, 255);
}
background: #eee;
}
.stripe-table tbody tr:hover {
background: rgb(217, 229, 255);
}
テーブルの角を丸くして、少し可愛くしてみる？
角を丸くする行の最初と最後のtdタグに対してスタイルが当たるようにしてあげる必要がある
| 見出し1 | 見出し2 | 見出し3 | 見出し4 |
|---|---|---|---|
| データ1-1 | データ1-2 | データ1-3 | データ1-4 |
| データ2-1 | データ2-2 | データ2-3 | データ2-4 |
| データ3-1 | データ3-2 | データ3-3 | データ3-4 |
| データ4-1 | データ4-2 | データ4-3 | データ4-4 |
| データ5-1 | データ5-2 | データ5-3 | データ5-4 |
css
.radius-table thead tr th:first-child {
border-radius: 5px 0 0 0;
}
.radius-table thead tr th:last-child {
border-radius: 0 5px 0 0;
}
.radius-table {
border-collapse:separate;
}
.radius-table tbody tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
.radius-table tbody tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
border-radius: 5px 0 0 0;
}
.radius-table thead tr th:last-child {
border-radius: 0 5px 0 0;
}
.radius-table {
border-collapse:separate;
}
.radius-table tbody tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
.radius-table tbody tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
それぞれのデータが分離したテーブルにしてみる
何言うてんの？って感じですが、こんな感じ。
ついでに、クリックしたら色つくようにしてみました。
| データ1-1 | データ1-2 | データ1-3 | データ1-4 |
| データ2-1 | データ2-2 | データ2-3 | データ2-4 |
| データ3-1 | データ3-2 | データ3-3 | データ3-4 |
| データ4-1 | データ4-2 | データ4-3 | データ4-4 |
| データ5-1 | データ5-2 | データ5-3 | データ5-4 |
css
.radius-all-table {
border-collapse:separate;
border-spacing: 4px;
}
.radius-all-table tbody tr td {
border-radius: 5px;
cursor: pointer;
}
.radius-all-table tbody tr td.td-active {
background-color: orange;
}
border-collapse:separate;
border-spacing: 4px;
}
.radius-all-table tbody tr td {
border-radius: 5px;
cursor: pointer;
}
.radius-all-table tbody tr td.td-active {
background-color: orange;
}
クリックした時の色の付け替えは、こちらをご覧ください。
選択できるパネルを作ってみる divタグで作ってみる スタイルシートでパネルを作ります。 そのあと、クリックした時に色を変更するようにjQueryで作ってみました。 選択肢1 選択肢2 選択肢3 html
ドラッグ＆ドロップで並び替えできるようにしてみる
まずは普通のテーブル
見出し1 見出し2 見出し3 見出し4 データ1-1 データ1-2 データ1-3 データ1-4 データ2-1 データ2-2 データ2-3 データ2-4 データ3-1 データ3-2 データ3-3 データ3-4 データ4-1 データ4-2 データ4-3 データ4-4 データ5-1 データ5-2 データ5-3 データ5-4 まずはjquery-uiを読み込むようにして、
tbodyにIDを付与して、そのIDでsortable()を呼ぶようにするだけ。
あとは、ドラッグできるんだよ！ってことでcursorを少しイジりました。html<tbody id=”sort-table”>javascript$(‘#sort-table’).sortable();css#sort-table tr {
cursor: grab;
}
#sort-table tr:active {
cursor: grabbing
}
