console 命令行工具 X clear

console

tableFixed($('.z-table .z-table-con table'), 3)

function tableFixed(table, num) {
  var _$wrap = table.parents('.z-table');
  _$wrap.find('.fixedHead, .fixedList, .fixedLH').remove();
  // 给th固定宽高
  table.find('thead th').each(function(index, el){
    $(el).width($(el).width());
    $(el).height($(el).height());
  });
  // 表头thead
  var _$fixedTh = table.find('thead').clone();
  _$wrap.append(_$fixedTh)
  _$fixedTh.wrap('<div class="fixedHead"><table></table></div>');
  
  // 固定列
  _$wrap.append($('<div class="fixedList"><table><thead></thead><tbody></tbody></table></div>'));
  listHead(table, 'thead', num); // 固定列的thead
  listHead(table, 'tbody', num); // 固定列的body
  // 固定列的头部
  var _$fixedLH = _$wrap.find('.fixedList table thead').clone();
  _$wrap.append(_$fixedLH)
  _$fixedLH.wrap('<div class="fixedLH"><table></table></div>');
	// tableObj：原表格table， tCon：thead或tbody， n：固定的列数num
  function listHead(tableObj, tCon, n) {
		var tr_arr = [];
		tableObj.find(tCon + " tr").each(function(index, el){
			tr_arr[index] = [];
			var _$tr = $('<tr></tr>');
			for (var i = 0; i < n; i++) {
        // 默认单元
				tr_arr[index][i] = {
						col: 0,
						row: 0,
						el: 1	
				}
        // 处理跨列的th，td
				var cn = 0;
				if (i > 0) {
					cn = tr_arr[index][i-1].col;
					if (cn > 1) {
						cn--;
						tr_arr[index][i] = {
								col: cn,
								row: tr_arr[index][i].row,
								el: 0	
						}
						continue;
					}
				}
        // 处理跨行的th，td
				var rn = 0;
				if (index > 0) {
					rn = tr_arr[index-1][i].row;
					if (rn > 1) {
						rn--;
						tr_arr[index][i] = {
								col: tr_arr[index-1][i].col,
								row: rn,
								el: 0	
						}
						continue;
					}
				}
        // 筛选插入的th，td
				var _$el_null = 0
				if (tr_arr[index].length > 1) {
					for (var k = 0; k < tr_arr[index].length; k++) {
						if (tr_arr[index][k].el == 0) {
							_$el_null++
						}
					}
				}
				var _$el = $(el).find('th, td').eq(i-_$el_null);
        // 存入数组
				tr_arr[index][i] = {
						col: parseInt(_$el.attr('colspan')) || 1,
						row: parseInt(_$el.attr('rowspan')) || 1,
						el: _$el
				}
        // 插入到tr片段中
				_$tr.append(_$el.clone().css('color','#ff00ff'));
			}
      // 将tr插入到对应的thead，tbody
			tableObj.parents('.z-table').find('.fixedList table:eq(0)').find(tCon).append(_$tr);
		});

	}
  
  $('.z-table').on('scroll', function(){
    var scrollTop = $(this).scrollTop();
    var scrollLeft = $(this).scrollLeft();
    $(this).find('.fixedHead, .fixedLH').css('top', scrollTop + 'px');
    $(this).find('.fixedList, .fixedLH').css('left', scrollLeft + 'px');
    
  })
  
}

<div class="title">表头固定及列固定</div>
<div class="z-table">
  <div class="z-table-con">
    <table>
  <thead>
    <tr>
      <th rowspan='2'>thead</th>
      <th colspan='2'>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
    </tr>
    <tr>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan='2'>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td colspan="2">1</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td colspan="2">3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>
  </div>
</div>

.z-table{
  width:700px;
  height: 500px;
  overflow: auto;
  position: relative;
 // border: 1px solid #ff00ff;
  margin: 20px auto;
}
th, td{
  border: 1px solid #ccc;
  text-align: center;
}
td{
  height: 50px;
  background: #ffffff;
}
th{
  background: #ccffff;
  padding: 8px;
}
.z-table .z-table-con{
  position: relative;
}
.z-table .fixedHead{
  position: absolute;
  top: 0px;
  left: 0px;
}
.z-table .fixedList{
  position: absolute;
  top: 0px;
  left: 0px;
}
.z-table .fixedLH{
  position:absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
}
.title{
  text-align: center;
}