Untitled

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<style>
#wrapper {
		height: 150px;
		width: 800px;
		border: 1px solid #808080;
		position: relative;

		overflow-y: scroll;
		overflow-x: scroll;
		scrollbar-base-color: #DFDFDF;
		scrollbar-arrow-color: #235A81;

}
#data {
  border-collapse: collapse;
  border: 0;
  width: 800px;
}
#data th {
  border-left: 1px solid #808080;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
#data td {
  border: 1px solid #808080;
}
#data tr:first-child th {
  border-top: 0;
}
#data tr:last-child td {
  border-bottom: 0;
}
#data tr td:first-child,
#data tr th:first-child {
  border-left: 0;
}

</style>

  <script>
  $(function() {
    $( "#data tr th" ).resizable({
      handles: 'e'
    });
  });
  </script>

</head>

<body>


<div id="wrapper">
	<table id="data" class="ui-widget-content">
	    <tr>
	        <th>header1</th>
	        <th>header2</th>
	        <th>header3</th>
	       	<th>header4</th>
	    </tr>
	    <tr>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	    </tr>
	    <tr>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	    </tr>
	        <tr>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	    </tr>
	        <tr>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	    </tr>
	        <tr>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	        <td>&nbsp;</td>
	    </tr>
	</table>
</div>


</body>

</html>