HTML table with vertical scroll inside tbody

Topic on Stackoverflow: http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody

HTML

<div class="withScroll" border="23px solid #acacac;" background="#f0f0f0">
  <table>
   <thead>
    <tr class="norCell">
    	<td id="col1">Кол 1</td>
    	<td id="col2">Кол 2</td>
    	<td id="col3">Кол 3</td>
   </tr>
   </thead>
<tbody>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
    <td id="col3">Колонка 3</td>
   </tr>
</tbody>
  </table>
  
  </div>

CSS

table { width: 100%; font: 8pt Arial; border-collapse: collapse; }
table td { border: 1px solid #acacac; padding: 5px 25px; text-align: center; width: 100%; }
 

.withScroll table tbody { height: 150px; overflow: auto; margin-top: -1px; }
.withScroll table thead td:last-child { width: 100%; }
input {
    width: 100%; /* Ширина первой колонки */
    height: 100%;
}
   

   #col1 {
    width: 30%; /* Ширина первой колонки */
   }
   #col2 {
    width: 40%; /* Ширина второй колонки */
    background: #f0f0f0; /* Цвет фона второй колонки */
   }
   #col3 {
    width: 30%; /* Ширина третьей колонки */
    background: #fc0; /* Цвет фона третьей колонки */
   }
   
tr {
    width: 100%;
   }

JavaScript

$.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
    if (elem.setSelectionRange) {
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
    });
    return this;
};

$(function()	{
	$('tbody td:nth-of-type(1)').click(function(e)	{
		//ловим элемент, по которому кликнули
		var t = e.target || e.srcElement;
		//получаем название тега	
		var elm_name = t.tagName.toLowerCase();
		//если это инпут - ничего не делаем
		if(elm_name == 'input')	{return false;}

		var val = $(this).html();
		var code = '<input type="text" id="edit" value="'+val+'" />';
		$(this).empty().append(code);	
var ttt = $(this).parent()
		$('#edit').focus();
		$('#edit').blur(function()	{
			var val = $(this).val();
			$(this).parent().empty().html(val);
			$('td:nth-of-type(2)',ttt).empty().append(val);
		});
	});
});