css tableで背景色を交互に変える方法

cssの擬似クラスnth-childを使用して、テーブル(表)の行または列の背景色を交互に変えて視認性をアップさせます。行や列を追加・削除しても自動的に背景色を変えてくれるのでとても便利です。nth-childはIE8以下では未対応ですが、マイクロソフトはIE8のサポートを終了したので、これからは使用していこうと思います。

サンプル1 偶数行の背景色を変える

tr:nth-child(even)または、tr:nth-child(2n)で偶数行の背景色を灰色に変えられます。

html

<table class="s-tbl">
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl tr:nth-child(even) {
	background: #eee;
}
.s-tbl tr:hover {
	background: #ff0;
}

サンプル2 データ部の偶数行の背景色を変える

tr:nth-child(odd)または、tr:nth-child(2n+1)でデータ部の偶数行の背景色を灰色に変えられます。このサンプルでは１行目を見出しにしているため奇数の設定になっています。 tr:first-childとth:first-childで見出し(th)の背景色を水色に設定します。

html

<table class="s-tbl">
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl tr:nth-child(2n+1) {
	background: #eee;
}
.s-tbl tr:first-child, .s-tbl th:first-child {
	background: #0ff;
}
.s-tbl tr:hover {
	background:#ff0;
}

サンプル3 奇数行の背景色を変える

tr:nth-child(odd)または、tr:nth-child(2n+1)で奇数行の背景色を灰色に変えられます。

html

<table class="s-tbl">
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl tr:nth-child(odd) {
	background: #eee;
}
.s-tbl tr:hover {
	background: #ff0;
}

サンプル4 奇数行のデータ部分の背景色を変える

tr:nth-child(even)または、tr:nth-child(2n)でデータ部の奇数行の背景色を灰色に変えられます。このサンプルでは１行目を見出しにしているため偶数の設定になっています。 tr:first-childとth:first-childで見出し(th)の背景色を水色に設定します。

html

<table class="s-tbl">
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	font-size:12px;
	border: 1px solid #000;
}
.s-tbl tr:nth-child(2n) {
	background: #eee;
}
.s-tbl tr:first-child, .s-tbl th:first-child {
	background: #0ff;
}
.s-tbl tr:hover {
	background: #ff0;
}

サンプル5 偶数列のデータ部分の背景色を変える

htmlに<col>を列の数だけ記述してcssで列の設定します。 col:nth-child(2n+3)でデータの偶数列の背景色を灰色に変えられます。このサンプルでは１列目を見出しにしているため、奇数の設定になっています。 col:first-childとtr:first-childで見出し(th)の背景色を水色に設定します。

html

<table class="s-tbl">
	<col><col><col><col><col><col>
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl col:nth-child(2n+3) {
	background: #eee;
}
.s-tbl col:first-child, .s-tbl tr:first-child {
	background:#0ff;
}
.s-tbl tr:hover {
	background: #ff0;
}

サンプル6 奇数列のデータ部分の背景色を変える

htmlに<col>を列の数だけ記述してcssで列の設定します。 col:nth-child(2n)でデータの奇数列の背景色を灰色に変えられます。このサンプルでは１列目を見出しにしているため、偶数の設定になっています。 col:first-childとtr:first-childで見出し(th)の背景色を水色に設定します。

html

<table class="s-tbl">
	<col><col><col><col><col><col>
	<tr><th>1</th><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th></tr>
	<tr><th>2</th><td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td></tr>
	<tr><th>3</th><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td></tr>
	<tr><th>4</th><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td><td>データ15</td></tr>
	<tr><th>5</th><td>データ16</td><td>データ17</td><td>データ18</td><td>データ19</td><td>データ20</td></tr>
	<tr><th>6</th><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td><td>データ25</td></tr>
	<tr><th>7</th><td>データ26</td><td>データ27</td><td>データ28</td><td>データ29</td><td>データ30</td></tr>
	<tr><th>8</th><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td><td>データ35</td></tr>
</table>

css

.s-tbl {
	border-collapse: collapse;
}
.s-tbl th, .s-tbl td {
	border: 1px solid #000;
}
.s-tbl col:nth-child(2n) {
	background: #eee;
}
.s-tbl col:first-child, .s-tbl tr:first-child {
	background:#0ff;
}
.s-tbl tr:hover {
	background: #ff0;
}

その他

この方法を使用すればテーブルだけでなく、リストなども交互に色を変えることができます。