A JavaScript class for dynamically striping HTML data tables.
Apply class "standard" to the <table> for auto alternating rows and class "overlap" to the <th> for a specific column with overlap styles.
| Fund/Benchmark Name | 1-Yr | 3-Yr | 5-Yr | 10-Yr | Lifetime |
|---|---|---|---|---|---|
| VP Growth & Income | 13.28% | 9.35% | 5.62% | N/A | 9.41% |
| S&P 500 Index | 15.80% | 10.44% | 6.19% | 8.42% | N/A |
| Morningstar Large Blend | 14.15% | 10.05% | 5.92% | 7.79% | N/A |
Apply class "enhanced" to the <table> for auto alternating rows and columns with overlap styles.
| Fund/Benchmark Name | 1-Yr | 3-Yr | 5-Yr | 10-Yr | Lifetime |
|---|---|---|---|---|---|
| VP Growth & Income | 13.28% | 9.35% | 5.62% | N/A | 9.41% |
| S&P 500 Index | 15.80% | 10.44% | 6.19% | 8.42% | N/A |
| Morningstar Large Blend | 14.15% | 10.05% | 5.92% | 7.79% | N/A |
Grab this script and save it to your server.
Link to the saved script in the <HEAD> of your document:
<script language="javascript" src="plaid.js"></script>
Modify the color scheme to work with your design.
Add the following styles to your CSS file; then modify the values to match your existing brand.
.standard, .enhanced {
border-collapse: collapse;
caption-side: bottom;
margin: 2em 0;
padding: 0;
width: 100%;
}
.standard td, .enhanced td {
border-bottom: 1px dotted #bbb;
padding: .5em;
}
.standard th, .enhanced th {
border-bottom: 1px dotted #bbb;
font-weight: bold;
padding: .5em;
text-align: left;
}
caption {
color: #999;
font-size: .9em;
font-weight: normal;
margin: 0;
padding: .5em 0;
text-align: left;
}
Add the classes (.standard, or .enhanced) to the tables on the page.
This work is licensed under a Creative Commons Attribution 3.0 United States License.