DIV + CSS 再牛也无法完全取代table，很多时候还是需要用到表格，这里就不探讨孰优孰劣，贴出dl dt dd模拟表格实例。

 

项目功能： dl dt dd 模拟table； 支持拖动； 支持序号生成； select控件选择操作等

兼容浏览器：IE6\IE7\IE8\IE9\IE11\FF3.0\Chrome

效果图：

dl-dt-dd-select-demo

 

源代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>table sorted</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
		dl,dt,dd{
			margin:0;
			font-size:14px;
		}
		dl{
			margin:0 auto;
			width:600px;
			border:1px solid #f8b3d0;
			border-bottom:none;
		}
		dt{
			font-weight:800;
			background:#ff99cc;
			color:#fff;
		}
		dt, dd{
			line-height:30px;
			padding:0;
			border-bottom:1px solid #f8b3d0;
			height:30px;
			overflow:hidden
		}
		.fff{
			background:#fff5fa
		}
		dt label, dd label{
			display:block;
			float:left;
			font-size:14px;
			border-right:1px solid #f8b3d0;
			width:80px;
			text-align: center;
		}
		dt span, dd span{
			display:block;
			float:left;
			font-size:14px;
			width:80px;
			text-indent:1em;
			text-align:center;
		}
		</style>
	</head>
	
	<body>
	<center>
		<dl class="link_cont">
			<dt>
				<label>ID</label>
				<label>日期</label>
				<span>网址</span>
			</dt>
			<dd class="fff">
				<label name="label_sortedindex">1</label>
				<label>11.2</label>
				<span>https://blog.mimvp.com</span>
			</dd>
			<dd>
				<label name="label_sortedindex">2</label>
				<label>11.3</label>
				<span>http://forum.ithomer.net</span>
			</dd>
			<dd class="fff">
				<label name="label_sortedindex">3</label>
				<label>11.4</label>
				<span>http://www.ithomer.net</span>
			</dd>
			<dd>
				<label name="label_sortedindex">4</label>
				<label>11.3</label>
				<span>http://ithomer.net</span>
			</dd>
		</dl>

		<div style="margin-top: 18px;">    
			<select id="id_pagesize" style="width: 60px;" onchange="pagesize_onchange();"> 
				<option value="10">10</option> 
				<option value="15" selected="true">15</option>
				<option value="20">20</option> 
				<option value="999">全部</option> 
			</select>
		</div>
	</center>
	</body>

	<script type="text/javascript">
		$.fn.kpdragsort = function(options) {
			var container = this;
			$(container).children().off("mousedown").mousedown(function(e) {
				if(e.which != 1 || $(e.target).is("input, textarea") || window.kp_only) return; // 排除非左击和表单元素
				e.preventDefault(); // 阻止选中文本
		 
				var x = e.pageX;
				var y = e.pageY;
				var _this = $(this); // 点击选中块
				var w = _this.width();
				var h = _this.height();
				var w2 = w/2;
				var h2 = h/2;
				var p = _this.offset();
				var left = p.left;
				var top = p.top;
				window.kp_only = true;
		 
				// 添加虚线框
				_this.before('<div id="kp_widget_holder"></div>');
				var wid = $("#kp_widget_holder");
				wid.css({"border":"2px dashed #ccc", "height":_this.outerHeight(true)-4});
		 
				// 保持原来的宽高
				_this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});
		 
				// 绑定mousemove事件
				$(document).mousemove(function(e) {
					e.preventDefault();
					// 移动选中块
					var l = left + e.pageX - x;
					var t = top + e.pageY - y;
					_this.css({"left":l, "top":t});
		 
					// 选中块的中心坐标
					var ml = l+w2;
					var mt = t+h2;
		 
					// 遍历所有块的坐标
					$(container).children().not(_this).not(wid).each(function(i) {
						var obj = $(this);
						var p = obj.offset();
						var a1 = p.left;
						var a2 = p.left + obj.width();
						var a3 = p.top;
						var a4 = p.top + obj.height();
		 
						// 移动虚线框
						if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
							if(!obj.next("#kp_widget_holder").length) {
								wid.insertAfter(this);
							}else{
								wid.insertBefore(this);
							}
							return;
						}
					});
				});
		 
				// 绑定mouseup事件
				$(document).mouseup(function() {
					$(document).off('mouseup').off('mousemove');
					// 检查容器为空的情况
					$(container).each(function() {
						var obj = $(this).children();
						var len = obj.length;
						if(len == 1 && obj.is(_this)) {
							$("<div></div>").appendTo(this).attr("class", "kp_widget_block").css({"height":100});
						}else if(len == 2 && obj.is(".kp_widget_block")){
							$(this).children(".kp_widget_block").remove();
						}
					});
		 
					// 拖拽回位，并删除虚线框
					var p = wid.offset();
					_this.animate({"left":p.left, "top":p.top}, 100, function() {
						_this.removeAttr("style");
						wid.replaceWith(_this);
						window.kp_only = null;
					});
				});
			});
		}
		 
		$(".link_cont").kpdragsort();
		
		function pagesize_onchange(){
			id_pagesize = document.getElementById("id_pagesize");
			curr_value = id_pagesize.options[id_pagesize.options.selectedIndex].value;	// 获取选中值
			
			for(var i=0; i<id_pagesize.options.length; i++) {
				value = id_pagesize.options[i].value;
				if(value == curr_value){
					id_pagesize.options[i].selected = true;		// 设置选中生效
					alert("selected value =" + curr_value + "; index = " + i);
					break;
				}
			}
		}
		
		// 添加序号ID
		$(document).ready(function(){
	 	

		// 添加序号ID
        items = document.getElementsByName("label_sortedindex");
        for(var i=0; i<items.length; i++){
			if(i < 9){
				items[i].innerText = "0" + (i + 1)
			} else {
				items[i].innerText = i
			}
        }
	 });
	</script>
</html>