轉載的部分

下文轉載自前端開發博客:

你需要做的就是用一個div來包含這個表格。

<div class="table-container">
<table>
...
<table>
</div>

然后添加下面的CSS代碼

//code from http://caibaojian.com/simple-responsive-table.html
.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}

為ios添加滾動條

如果你在iOS下面(如iphone)看這個案例的話,你會看不到滾動條,雖然用戶可以滑動表格滾動,但是這是不明顯的。我們只需要添加一些額外的CSS就能解決這個問題。

.table-container::-webkit-scrollbar
{
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-container::-webkit-scrollbar-thumb
{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

添加滾動條

下面這些jquery插件可以幫到你

也許你已經注意到了表格的邊緣被切割了,給它添加一個模糊的漸變層,為了適應所有的設備,我們還需要添加一些標記。
<div class="table-container-outer">
  	<div class="table-container-fade"></div>
  		<div class="table-container">
  		<table>  				...  			
		<table>  		
	</div>  	
</div>

下面是CSS

.table-container-outer { position: relative; }
.table-container-fade
{
position: absolute;
right: 0;
width: 30px;
height: 100%;
background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);
}

這就是你所看到的簡單的自適應表格了。

實際使用的部分

<styletype="text/css">  
	body  
	{  
		margin:0;  
		padding:20px;  
		color:#000;  
		background:#fff;  
		font:100%/1.3helvetica,arial,sans-serif;  
	}  
	  
	h1{margin:0;}  
	.container{width:100%;}  
	  
	table  
	{  
		margin:0;  
		border-collapse:collapse;  
	}  
	  
	td,th  
	{  
		padding:.5em1em;  
		border:1pxsolid#999;  
	}  
	  
	.table-container-outer{position:relative;}  
	  
	.table-container  
	{  
		width:100%;  
		overflow-y:auto;  
		_overflow:auto;  
		margin:001em;  
	}  
	  
	.table-container::-webkit-scrollbar  
	{  
		-webkit-appearance:none;  
		width:14px;  
		height:14px;  
	}  
	  
	.table-container::-webkit-scrollbar-thumb  
	{  
		border-radius:8px;  
		border:3pxsolid#fff;  
		background-color:rgba(0,0,0,.3);  
	}  
	  
	.table-container-fade  
	{  
		position:absolute;  
		right:0;  
		width:30px;  
		height:100%;  
		background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,.5),#fff);  
		background-image:-moz-linear-gradient(0deg,rgba(255,255,255,.5),#fff);  
		background-image:-ms-linear-gradient(0deg,rgba(255,255,255,.5),#fff);  
		background-image:-o-linear-gradient(0deg,rgba(255,255,255,.5),#fff);  
		background-image:linear-gradient(0deg,rgba(255,255,255,.5),#fff);  
	}  
</style>  
	<divclass="table-container-outer">  
		<divclass="table-container-fade"></div>  
		<divclass="table-container">  
			111  
</div>  
</div>  
</div>

效果截圖

使用上述代碼可是實現下圖效果。

表格效果.png

總結

原有代碼是適適合自己寫模板用的,或者寫單獨的html文件用的。

我刪減了部分,直接發到超文本編輯框html粘貼進去就可以了。