Skip to content

Instantly share code, notes, and snippets.

@robertwbradford

robertwbradford/gist:1281646

Created October 12, 2011 16:02
Show Gist options
  • Save robertwbradford/1281646 to your computer and use it in GitHub Desktop.
Save robertwbradford/1281646 to your computer and use it in GitHub Desktop.
Download ZIP
Resize table columns within a container
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Resize table columns within a container</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" type="text/css" />
<style type="text/css" media="screen">
body{margin:0;padding:0;background:#66F;}
#frame{background:#FFF;margin:100px;border:3px solid #ccc;overflow-x:scroll;}
#frame table th,
#frame table td{background:#ccc;}
.ui-resizable-e{cursor: col-resize;}
</style>
<script type="text/javascript" charset="utf-8">
$(function() {
$('table th').resizable({
handles: 'e',
});
});
</script>
</head>
<body>
<div id="frame">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment