html中table设置每个单元格的不同颜色和宽度

 我来答

2个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

yugi111
推荐于2016-01-10 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>
			RunJS 演示代码
		</title>
		<style>
			table{
				margin:auto;
				width:50%;
				border:1px solid black;
				border-collapse:collapse;
			}
			td{
				text-align:center;
				border:1px solid black;
			}
		</style>
		<script>
			onload=function(){
				var table = document.querySelector("table");
				var rows = table.tBodies[0].rows;
				for(var i = 0; i < rows.length; i++){
					var tds = rows[i].cells;
					for(var j = 0; j < tds.length; j++){
						var td = tds[j];
						td.style.width = Math.random()*1000 + "px";
						td.style.backgroundColor = "rgb(" + Math.floor(Math.random()*255) + "," + Math.floor(Math.random()*255)  + "," + Math.floor(Math.random()*255)  + ")";
					}
				}
			}
		</script>
  </head>
	<body>
		<table>
			<tr>
				<td>
					11
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
			</tr>
			<tr>
				<td>
					11
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
				<td>
					22
				</td>
			</tr>
		</table>
  </body>
</html>