Created
March 2, 2012 02:29
-
-
Save ajsutton/1955046 to your computer and use it in GitHub Desktop.
Alternating Table Row Colours Filling A Scroll Panel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="scroll"> | |
<table class="striped"> | |
<tbody> | |
<tr><td>Row 1</td></tr> | |
<tr><td>Row 2</td></tr> | |
<tr><td>Row 3</td></tr> | |
<tr><td>Row 4<br>With an extra line</td></tr> | |
<tr><td>Row 5</td></tr> | |
<tr class="filler"><td></td></tr> | |
</tbody> | |
</table> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.striped .filler { | |
line-height: 0; | |
background: url(stripes.png) repeat top left; | |
height: 100%; | |
padding: 0; | |
} | |
.striped .filler td { | |
padding: 0; | |
} | |
.striped .filler:nth-child(even) { | |
background-position: 0 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=UTF-8> | |
<title>Alternating Rows Example</title> | |
<style> | |
* { margin: 0; padding: 0; } | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
height: 100%; | |
} | |
.scroll { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
overflow-y: scroll; | |
overflow-x: auto; | |
} | |
.scroll tr { | |
height: 20px; | |
} | |
.striped tr:nth-child(odd) { | |
background-color: #EAEAEA; | |
} | |
.striped .filler { | |
line-height: 0; | |
height: 100%; | |
padding: 0; | |
background-image: linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0.5, rgb(255,255,255)), | |
color-stop(0.5, rgb(234,234,234)) | |
); | |
-webkit-background-size: 40px 40px; | |
-moz-background-size: 40px 40px; | |
-ms-background-size: 40px 40px; | |
-o-background-size: 40px 40px; | |
background-size: 40px 40px; | |
} | |
.striped .filler td { | |
padding: 0; | |
} | |
.striped .filler:nth-child(even) { | |
background-position: 0 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="scroll"> | |
<table class="striped"> | |
<tbody> | |
<tr><td>Row 1</td></tr> | |
<tr><td>Row 2</td></tr> | |
<tr><td>Row 3</td></tr> | |
<tr><td>Row 4<br>With an extra line</td></tr> | |
<tr><td>Row 5</td></tr> | |
<tr class="filler"><td></td></tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.striped .filler { | |
line-height: 0; | |
height: 100%; | |
padding: 0; | |
background-image: linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(234,234,234) 50%); | |
background-image: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0.5, rgb(255,255,255)), | |
color-stop(0.5, rgb(234,234,234)) | |
); | |
-webkit-background-size: 40px 40px; | |
-moz-background-size: 40px 40px; | |
-ms-background-size: 40px 40px; | |
-o-background-size: 40px 40px; | |
background-size: 40px 40px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=UTF-8> | |
<title>Alternating Rows Example</title> | |
<style> | |
* { margin: 0; padding: 0; } | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
height: 100%; | |
} | |
.scroll { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
overflow-y: scroll; | |
overflow-x: auto; | |
} | |
.scroll tr { | |
height: 20px; | |
} | |
.striped tr:nth-child(odd) { | |
background-color: #EAEAEA; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="scroll"> | |
<table class="striped"> | |
<tbody> | |
<tr><td>Row 1</td></tr> | |
<tr><td>Row 2</td></tr> | |
<tr><td>Row 3</td></tr> | |
<tr><td>Row 4<br>With an extra line</td></tr> | |
<tr><td>Row 5</td></tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment