sketchy table design

index.html

<div class="container">
	<table>
		<tr>
			<th></th>
			<th>SALES</th>
			<th>PROFIT</th>
			<th></th>
		</tr>
		
		<tr>
			<td>January</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>February</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>March</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>April</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>May</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>June</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>July</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>August</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>September</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>October</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>November</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tr>
			<td>December</td>
			<td>$100,00.00</td>
			<td>$20,000.00</td>
			<td></td>
		</tr>
		
		<tfoot>
			<tr>
				<td></td>
				<td>$1,200,000.00</td>
				<td>$240,000.00</td>
				<td></td>
			</tr>
		</tfoot>
	</table>
</div>

sketchy-table-design.markdown

sketchy table design

A Pen by Andrew Creech on CodePen.

License.

style.sass

body
	font-family: Courier
	font-size: 15px

.container
	display: flex
	align-items: center
	justify-content: center
	height: 90vh
	width: 90vw

table
	border-collapse: collapse

tr:nth-child(odd)
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHUlEQVQYV2NkgIK3b9/+ZwSxQQxhYWFGRhgDJAgA4hULytmCFnsAAAAASUVORK5CYII=)
tr:first-child
	background: none
th
	padding-right: 5px
	text-align: right
th:first-child
	border-right: 1px solid #f1f1f1
th:nth-child(3)
	padding-right: 40px
	border-right: 1px solid #f1f1f1

td
	font-style: italic
	color: #666
	border-top: 1px solid #ddd
	border-bottom: 1px solid #ddd
	padding: 3px 5px 3px 40px
	text-align: right
td:first-child
	border-color: #f1f1f1
	border-right: 1px solid #ddd
	background: white
td:nth-child(3)
	padding-right: 40px
td:last-child
	padding-right: 40px
	border-color: #f1f1f1
	border-left: 1px solid #ddd
	background: white

tfoot td
	border-bottom: none
	color: black
	font-weight: bold
tfoot td:last-child
	border-color: #f1f1f1
tfoot td:first-child
	border-color: #f1f1f1