A table formatted in a zigzag diagonal layout.
A Pen by Chris Smith on CodePen.
<h1>Top England Goal Scorers</h1> | |
<table class="zigzag"> | |
<thead> | |
<tr> | |
<th class="header">Player</th> | |
<th class="header">Goals</th> | |
<th class="header">First</th> | |
<th class="header">Latest</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Wayne Rooney</td> | |
<td>53</td> | |
<td>06 Sep 2003</td> | |
<td>27 Jun 2016</td> | |
</tr> | |
<tr> | |
<td>Bobby Charlton</td> | |
<td>49</td> | |
<td>19 Apr 1958</td> | |
<td>20 May 1970</td> | |
</tr> | |
<tr> | |
<td>Gary Lineker</td> | |
<td>48</td> | |
<td>26 Mar 1985</td> | |
<td>29 Apr 1992</td> | |
</tr> | |
<tr> | |
<td>Jimmy Greaves</td> | |
<td>44</td> | |
<td>17 May 1959</td> | |
<td>24 May 1967</td> | |
</tr> | |
<tr> | |
<td>Michael Owen </td> | |
<td>40</td> | |
<td>27 May 1998</td> | |
<td>12 Sep 2007</td> | |
</tr> | |
<tr> | |
<td>Alan Shearer</td> | |
<td>30</td> | |
<td>19 Feb 1992</td> | |
<td>20 Jun 2000</td> | |
</tr> | |
<tr> | |
<td>Tom Finney</td> | |
<td>30</td> | |
<td>28 Sep 1946</td> | |
<td>04 Oct 1958</td> | |
</tr> | |
<tr> | |
<td>Nat Lofthouse</td> | |
<td>30</td> | |
<td>22 Nov 1950</td> | |
<td>22 Oct 1958</td> | |
</tr> | |
<tr> | |
<td>Vivian Woodward</td> | |
<td>29</td> | |
<td>14 Feb 1903</td> | |
<td>13 Mar 1911</td> | |
</tr> | |
<tr> | |
<td>Frank Lampard</td> | |
<td>29</td> | |
<td>20 Aug 2003</td> | |
<td>29 May 2013</td> | |
</tr> | |
</tbody> | |
</table> |
h1 { | |
color:#c00; | |
font-family:sans-serif; | |
font-size:2em; | |
margin-bottom:0; | |
} | |
table { | |
font-family:sans-serif; | |
th, td { | |
padding:.25em .5em; | |
text-align:left; | |
&:nth-child(2) { | |
text-align:right; | |
} | |
} | |
td { | |
background-color:#eee; | |
} | |
th { | |
background-color:#009; | |
color:#fff; | |
} | |
} | |
.zigzag { | |
border-collapse:separate; | |
border-spacing:.25em 1em; | |
tbody tr:nth-child(odd) { | |
transform:rotate(2deg); | |
} | |
thead tr, | |
tbody tr:nth-child(even) { | |
transform:rotate(-2deg); | |
} | |
} |
A table formatted in a zigzag diagonal layout.
A Pen by Chris Smith on CodePen.