Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 Zebra striping table example
<html>
<head>
<style type='text/css'>
/*設定所有標題的樣式*/
th:nth-child(1n) {
width:60px;
text-align:center;
background-color: silver;
}
/*設定第一欄的樣式*/
td:nth-child(1){
text-align:center;
background-color: silver;
}
/*設定複數列的樣式*/
tr:nth-child(2n){
background-color: lightblue;
}
/*設定單數列的樣式*/
tr:nth-child(2n+1){
background-color: lightgreen;
}
/*設定第六欄的樣式*/
td:nth-child(6n){
text-align:center;
background-color: gold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
<th>標題4</th>
<th>標題5</th>
<th>標題6</th>
<th>標題7</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>2</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>3</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>4</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>5</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>6</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
<tr>
<td>7</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.