*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

縞々の表(TABLE)、選択時のセル・列の色の反転

TOP > サンプル >  縞々の表(TABLE)、選択時のセル・列の色の反転
X B! FB LINE

縞々の表、選択時のセル・列の色の反転のサンプル

普通の表(テーブル)

番号氏名得点
1山田75点
2田中80点
3広瀬70点
4尾崎85点
5吉村100点

サンプルソースを表示 

.tbl_demo1 {
	border: 1px solid #83acd0;
	border-collapse: collapse;
	background-color:#fff;
}
.tbl_demo1 th {
	color: #393939;
	border: 1px solid #83acd0;
	padding: 5px;
	background-color: #eaf1f7;
}
.tbl_demo1 td {
	border: 1px solid #83acd0;
	padding: 3px 10px;
}

<table class="tbl_demo1">
<tr><th>番号</th><th>氏名</th><th>得点</th></tr>
<tr><th>1</th><td>山田</td><td>75点</td></tr>
<tr><th>2</th><td>田中</td><td>80点</td></tr>
<tr><th>3</th><td>広瀬</td><td>70点</td></tr>
<tr><th>4</th><td>尾崎</td><td>85点</td></tr>
<tr><th>5</th><td>吉村</td><td>100点</td></tr>
</table>

+行を縞々に

番号氏名得点
1山田75点
2田中80点
3広瀬70点
4尾崎85点
5吉村100点

サンプルソースを表示 

.tbl_demo2 {
	border: 1px solid #83acd0;
	border-collapse: collapse;
	background-color:#fff;
}
.tbl_demo2 th {
	color: #393939;
	border: 1px solid #83acd0;
	padding: 5px;
	background-color: #eaf1f7;
}
.tbl_demo2 td {
	border: 1px solid #83acd0;
	padding: 3px 10px;
}
.tbl_demo2 tr:nth-child(odd) {
	background-color: #eaf4ff;
}

<table class="tbl_demo2">
<tr><th>番号</th><th>氏名</th><th>得点</th></tr>
<tr><th>1</th><td>山田</td><td>75点</td></tr>
<tr><th>2</th><td>田中</td><td>80点</td></tr>
<tr><th>3</th><td>広瀬</td><td>70点</td></tr>
<tr><th>4</th><td>尾崎</td><td>85点</td></tr>
<tr><th>5</th><td>吉村</td><td>100点</td></tr>
</table>

+フォーカス時にセルの色を変更

番号氏名得点
1山田75点
2田中80点
3広瀬70点
4尾崎85点
5吉村100点

サンプルソースを表示 

.tbl_demo3 {
	border: 1px solid #83acd0;
	border-collapse: collapse;
	background-color:#fff;
}
.tbl_demo3 th {
	color: #393939;
	border: 1px solid #83acd0;
	padding: 5px;
	background-color: #eaf1f7;
}
.tbl_demo3 td {
	border: 1px solid #83acd0;
	padding: 3px 10px;
}
.tbl_demo3 tr:nth-child(odd) {
	background-color: #eaf4ff;
}
.tbl_demo3 td:hover, .tbl_demo3 th:hover {
	background: #83acd0;
}

<table class="tbl_demo3">
<tr><th>番号</th><th>氏名</th><th>得点</th></tr>
<tr><th>1</th><td>山田</td><td>75点</td></tr>
<tr><th>2</th><td>田中</td><td>80点</td></tr>
<tr><th>3</th><td>広瀬</td><td>70点</td></tr>
<tr><th>4</th><td>尾崎</td><td>85点</td></tr>
<tr><th>5</th><td>吉村</td><td>100点</td></tr>
</table>

+フォーカス時に行全体の色を変更

番号氏名得点
1山田75点
2田中80点
3広瀬70点
4尾崎85点
5吉村100点

サンプルソースを表示 

.tbl_demo4 {
	border: 1px solid #83acd0;
	border-collapse: collapse;
	background-color:#fff;
}
.tbl_demo4 th {
	color: #393939;
	border: 1px solid #83acd0;
	padding: 5px;
	background-color: #eaf1f7;
}
.tbl_demo4 td {
	border: 1px solid #83acd0;
	padding: 3px 10px;
}
.tbl_demo4 tr:nth-child(odd) {
	background-color: #eaf4ff;
}
.tbl_demo4 tr:hover {
	background: #83acd0;
}

<table class="tbl_demo4">
<tr><th>番号</th><th>氏名</th><th>得点</th></tr>
<tr><th>1</th><td>山田</td><td>75点</td></tr>
<tr><th>2</th><td>田中</td><td>80点</td></tr>
<tr><th>3</th><td>広瀬</td><td>70点</td></tr>
<tr><th>4</th><td>尾崎</td><td>85点</td></tr>
<tr><th>5</th><td>吉村</td><td>100点</td></tr>
</table>

+影をつける

番号氏名得点
1山田75点
2田中80点
3広瀬70点
4尾崎85点
5吉村100点

サンプルソースを表示 

.tbl_demo4 {
	border: 1px solid #83acd0;
	border-collapse: collapse;
	background-color:#fff;
}
.tbl_demo4 th {
	color: #393939;
	border: 1px solid #83acd0;
	padding: 5px;
	background-color: #eaf1f7;
}
.tbl_demo4 td {
	border: 1px solid #83acd0;
	padding: 3px 10px;
}
.tbl_demo4 tr:nth-child(odd) {
	background-color: #eaf4ff;
}
.tbl_demo4 tr:hover {
	background: #83acd0;
}
.tbl_shadow {
	box-shadow:0px 0px 5px #ddd;
}

<table class="tbl_demo4 tbl_shadow">
<tr><th>番号</th><th>氏名</th><th>得点</th></tr>
<tr><th>1</th><td>山田</td><td>75点</td></tr>
<tr><th>2</th><td>田中</td><td>80点</td></tr>
<tr><th>3</th><td>広瀬</td><td>70点</td></tr>
<tr><th>4</th><td>尾崎</td><td>85点</td></tr>
<tr><th>5</th><td>吉村</td><td>100点</td></tr>
</table>
Amazonで購入 Googleアナリティクス HTML CSS JavaScript Unity React Vue.js