html table with matrix effect

最新推荐文章于 2021-06-05 01:41:47 发布

totogogo

最新推荐文章于 2021-06-05 01:41:47 发布

阅读量860

点赞数

分类专栏： WEB 2.0 文章标签： matrix table html class border float

本文链接：https://blog.csdn.net/totogogo/article/details/7464554

版权

WEB 2.0 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

同事帮写的。

test1.html

<html>
	<head></head>
	<style type="text/css">
		table {border: 1px solid #000;}
		td.item {border: 1px solid #f00;}
	</style>
	<body>
		<table>
			<tbody>
				<tr>
					<td class="item">a</td>
					<td class="item">b</td>
					<td class="item">c</td>
				</tr>
				<tr>
					<td class="blank"></td>
					<td class="item">y</td>
					<td class="item">z</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

test2.html

<html>
	<head></head>
	<style type="text/css">
		table {
			border: 1px solid #000;
			border-collapse: collapse;
		}
		div.test-table {
			float: left;			
		}
		div.test-table + div.test-table {margin-left: 1px;}
		th, td.item {
			
			border: 1px solid #ccc;
			padding: 0px 5px;
			height: 1.5em;
		}
		td.odd {background-color: #eee;}
		td.even {background-color: #fff;}
	</style>
	<body>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd">x</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd"></td>
					</tr>
					<tr>
						<td class="item even">x</td>
						<td class="item even">x</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="test-table">
			<table>
				<tbody>
					<tr>
						<th colspan="2">Compare</th>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd">x</td>
					</tr>
					<tr>
						<td class="item even"></td>
						<td class="item even"></td>
					</tr>
					<tr>
						<td class="item odd">x</td>
						<td class="item odd"></td>
					</tr>
				</tbody>
			</table>
		</div>		
	</body>
</html>

totogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html table with matrix effect

同事帮写的。test1.html table {border: 1px solid #000;} td.item {border: 1px solid #f00;} a b c y z test2.html t
复制链接

扫一扫

专栏目录