Skip to content

Instantly share code, notes, and snippets.

@lukasbob

lukasbob/gist:5195555

Created March 19, 2013 12:03
Show Gist options
  • Save lukasbob/5195555 to your computer and use it in GitHub Desktop.
Save lukasbob/5195555 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
height: 100%;
}
a {
background: rgba(0,0,0,.02);
}
a:hover {
background: rgba(0,0,0,.04);
}
th {
height: 40px;
/* This is necessary to avoid auto-growing cells in Chrome */
white-space: nowrap;
overflow: hidden;
}
th a {
display: block;
height: 100%;
width: 100%;
}
th .w1 {
display: table;
width: 100%;
height: 100%;
}
th .w1 span {
display: table-cell;
height: 100%;
width: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<a href="#"><span class="w1"><span>Header 1</span></span></a>
</th>
<th>
<a href="#"><span class="w1"><span>Header 2</span></span></a>
</th>
<th>
<a href="#"><span class="w1"><span>Header 3</span></span></a>
</th>
<th>
<a href="#"><span class="w1"><span>Header 4 <br>with line break</span></span></a>
</th>
<th>
<a href="#"><span class="w1"><span>Header 5</span></span></a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell contents</td>
<td>Cell contents</td>
<td>Cell contents</td>
<td>Cell contents</td>
<td>Cell contents</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment