Styling Tables Like a Boss: Responsive Scrolling Data Tables with Alternating Colors

Sometimes, creating a table with lots of data on the web can make webpages long and overwhelming. Enter the hero of this story, my responsive scrolling data table with alternating colors.

Here is the CSS For the table.

#success_table {
margin-left: auto; 
margin-right: auto;
border: 1px solid #AFB1B2;
}
#success_table #table_header {
background:#3E4344;
color:#fff;
font-weight:bold;
}
#success_table #scrolling {
max-height: 500px;
overflow-y: scroll;
}
#success_table table {
border-collapse: collapse;
width:100%
}
#success_table #table_title {
background:#26618D;
color:#fff;
font-weight:bold;
padding: 10px;
}
#success_table tr:nth-child(even) {
background:#878684;
color:#fff;
}
#success_table td {
padding:5px 5px 5px 10px; 
border: 1px solid #afb1b2;
border-left: none 0px;
font-weight: bold;
}

Here is The HTML

<div id="success_table">
<div id="table_title">Incredibly Awesome scrolling table data</div>
<div id="scrolling">
<table>
<tbody>
<tr id="table_header">
<td>Name</td>
<td>Lots of Money</td>
<td>Not as Much Money</td>
</tr>
<tr>
<td>Robert</td>
<td>$68,000.00</td>
<td>$1,355.00</td>
</tr>
<tr>
<td>Alejandra</td>
<td>$11,479.00</td>
<td>$2,000.00</td>
</tr>
<tr>
<td>Tony</td>
<td>$45,114.00</td>
<td>$1,870.00</td>
</tr>
<tr>
<td>Carla</td>
<td>$23,219.00</td>
<td>$1,000.00</td>
</tr>
<tr>
<td>Esta</td>
<td>$15,651.00</td>
<td>$500.00</td>
</tr>
<tr>
<td>Shannon</td>
<td>$74,206.00</td>
<td>$18,500.00</td>
</tr>
<tr>
<td>Gary</td>
<td>$11,858.00</td>
<td>$50.00</td>
</tr>
<tr>
<td>Domingo</td>
<td>$206,258.00</td>
<td>$15,850.00</td>
</tr>
<tr>
<td>Kenneth</td>
<td>$53,560.00</td>
<td>$1,500.00</td>
</tr>
<tr>
<td>Abdoul</td>
<td>$10,360.00</td>
<td>$1,600.00</td>
</tr>
<tr>
<td>Gary</td>
<td>$41,209.38</td>
<td>$1,137.00</td>
</tr>
<tr>
<td>Erica</td>
<td>$213,576.00</td>
<td>$2,000.00</td>
</tr>
<tr>
<td>Harold</td>
<td>$65,938.00</td>
<td>$20,345.00</td>
</tr>
<tr>
<td>Dawn</td>
<td>$35,523.00</td>
<td>$2,568.00</td>
</tr>
<tr>
<td>Willery</td>
<td>$20,469.98</td>
<td>$500.00</td>
</tr>
<tr>
<td>Don</td>
<td>$31,572.00</td>
<td>$1,350.00</td>
</tr>
<tr>
<td>Erik</td>
<td>$33,246.00</td>
<td>$300.00</td>
</tr>
<tr>
<td>Andrew</td>
<td>$11,633.00</td>
<td>$4,249.00</td>
</tr>
<tr>
<td>Brandon</td>
<td>$52,982.00</td>
<td>$750.00</td>
</tr>
<tr>
<td>Richard</td>
<td>$13,279.00</td>
<td>$2,000.00</td>
</tr>
<tr>
<td>Antonio</td>
<td>$11,446.00</td>
<td>$3,500.00</td>
</tr>
<tr>
<td>Bradley</td>
<td>$65,522.00</td>
<td>$4,200.00</td>
</tr>
<tr>
<td>Danny</td>
<td>$41,998.00</td>
<td>$200.00</td>
</tr>
<tr>
<td>Russell</td>
<td>$34,922.00</td>
<td>$5,000.00</td>
</tr>
<tr>
<td>Marc</td>
<td>$36,901.00</td>
<td>$600.00</td>
</tr>
<tr>
<td>Jack</td>
<td>$27,156.00</td>
<td>$4,000.00</td>
</tr>
<tr id="table_header">
<td>Second Header</td>
<td>Because Sometimes</td>
<td>You Need a Second Header</td>
</tr>
<tr>
<td>Bob P.</td>
<td>$40,000.00</td>
<td>$12,026.40</td>
</tr>
<tr>
<td>Randy P.</td>
<td>$16,539.35</td>
<td>$4,000.00</td>
</tr>
<tr>
<td>Wesley E.</td>
<td>$36,500.00</td>
<td>$17,592.00</td>
</tr>
<tr>
<td> Mark M.</td>
<td>$12,432.00</td>
<td>$0.00</td>
</tr>
</tbody>
</table>
</div>
</div>

And, here is the end result: