html不对齐表格的实现

°°°

已于 2022-11-28 16:47:16 修改

阅读量9.8k

点赞数 19

分类专栏： html 文章标签： html表格 table-layout: fixed colspan 不规则表格不对齐表格

于 2019-10-05 11:26:48 首次发布

本文链接：https://blog.csdn.net/weixin_42528956/article/details/102085188

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html不对齐、不规则表格的实现

一、效果图
二、代码实现
- - 先举个小例子，带你了解colspan属性和table-layout:fixed样式
  - 再举个小例子，实现表格单元格的宽度不同
三、总结
- - 实现宽度不对齐
  - 实现高度不对齐

做html页面的时候，要做一个单元格边线不对齐的表格，百度没找到相关的资料，（可能因为我不懂描述我的问题~）后面了解到table标签有个table-layout:fixed;的样式，激发了我的灵感，先看效果图。

一、效果图

html不对齐不规则表格例子
一时间没找到什么好的例子，就随便做了一个，内容重复是因为不知道写什么了，敷衍一下。“不对齐”表现在每个tr标签内的td数量可以不一致，宽高也可以不同。

二、代码实现

先举个小例子，带你了解colspan属性和table-layout:fixed样式

html代码

<table border="1px" cellspacing="0">
	<tr>
		<td colspan="5">书    名:第一行代码——Android（第2版）</td>
		<td colspan="2">作    者:郭霖</td>
	</tr>
</table>

css代码(美化方面的css我就不放上来了，我就是给table设置了30%的宽，全部td设置了42px的height)

table{
			table-layout:fixed;
	}

效果图
html不对齐不规则表格例子1
可以看到，表格按照td标签的colspan属性按比例分表格的宽（colspan 属性原意是规定单元格可横跨的列数），有人就说了，在css中将设置第一个td的width：50%，第二个td的width：20%，效果一样的，而且table标签还不用设置table-layout:fixed的样式。
确实，对于只是想对一行里的td设置宽度，我也会用百分比，但是这里我只是想说明td标签的colspan:""属性配合table标签的table-layout:fixed;样式，可以对td实现按比例分栏效果，为了后面讲的内容做铺垫（后面其实也没有难的东西）。

再举个小例子，实现表格单元格的宽度不同

html代码

<table border="1px" cellspacing="0" width="30%" >
	<tr>
		<td colspan="17">书    名:第一行代码——Android（第2版）</td>
		<td colspan="7">作    者:郭霖</td>
	</tr>
	<tr>
		<td colspan="10">出版社:人民邮电出版社</td>
		<td colspan="6">用    纸:胶版纸</td>
		<td colspan="8">出版时间:2016-11 </td>
	</tr>
</table>

css同上，只是给table添加了table-layout:fixed;样式。
效果图
html不对齐不规则表格例子2
可以看到，表格的第一行有2个单元格，第二行有3个单元格，并且第一行的单元格并没有跟第二行的单元格对齐！这在用百分比来设置td的宽度的情况下是实现不了的。

<table border="1px" cellspacing="0" width="30%" >
	<tr>
		<td colspan="2" style="width: 20%">书    名:第一行代码——Android（第2版）</td>
		<td style="width: 7%">作    者:郭霖</td>
	</tr>
	<tr>
		<td style="width: 16%">出版社:人民邮电出版社</td>
		<td style="width: 10%">用    纸:胶版纸</td>
		<td style="width: 11%">出版时间:2016-11 </td>
	</tr>
</table>

无css，也可给table添加table-layout:fixed;不过添加该样式后要重新调td的宽度，可自行尝试。
效果图
html规则表格例子1
对比上面一个，这个表格的【书名单元格】右侧必须与【用纸单元格】右侧对齐，即便【书名单元格】的width并不等于【出版社单元格】和【用纸单元格】单元格width的和。

三、总结

CSS中必须给你的table加上table-layout:fixed的样式

table{
			table-layout:fixed;
	}

实现宽度不对齐

需要在tr标签里的td用colspan属性来实现分栏，并且可以放自由数量的td，但是要确保每个tr标签里的td标签colspan属性加起来相等，例如第一个小例子中：

<table>
	<tr>
		<td colspan="17">	xxx	</td>
		<td colspan="7">	xxx	</td>
	</tr>
	<tr>
		<td colspan="10">	xxx	</td>
		<td colspan="6">	xxx	</td>
		<td colspan="8">	xxx	</td>
	</tr>
</table>

第一个tr的colspan总数为17+7=24，第一个tr的colspan总数为10+6+8=24，两者相等，。24栏也是我常用的栏数，推荐分为24栏。特别的，如果td标签没有设置colspan属性，则默认为1。另外，除了td标签，该属性也适用在th表头标签。

实现高度不对齐

要实现单元格的高度占多行，则需要rowspan属性，用法同colspan一样，rowspan是多少，就代表rowspan占了多少行，并且该单元格的colspan会计算到下面的tr中。例如：

		<table border="1px" cellspacing="0">
			<tr>
				<td colspan="9">出版社:人民邮电出版社</td>
				<td colspan="7">用    纸:胶版纸</td>
				<td colspan="8">出版时间:2016-11 </td>
			</tr>
			<tr>
				<td colspan="10">ISBN:978-7-115-43978-9</td>
				<td colspan="7">装    帧:平装</td>
				<td colspan="7" rowspan="5"><img src="https://bkimg.cdn.bcebos.com/pic/b3119313b07eca80ece1d9ed982397dda04483d0?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5"></td>
			</tr>
			<tr>
				<td colspan="17">类    别:计算机/软件开发/Android开发</td>
			</tr>
			<tr>
				<td colspan="5">开    本:16</td>
				<td colspan="6">页    数:580</td>
				<td colspan="6">作    者:郭霖</td>
			</tr>
			<tr>
				<td colspan="10">ISBN:978-7-115-43978-9</td>
				<td colspan="7">装    帧:平装</td>
			</tr>
			<tr>
				<td colspan="17">类    别:计算机/软件开发/Android开发</td>
			</tr>
		</table>

重点在代码的第10行中，即第二个tr里的第三个td，属性设置colspan=“7” rowspan=“5”，里面有个img。rowspan="5"意味着这个带图片的单元格将占用5行的高度。同时这里需要注意后续4个tr的colspan总数需要算上这个图片单元格的colspan，例子中的图片单元格占了7个colspan，那么第3个tr的colspan总数计算为17+7=24，第4个tr的colspan总数为5+6+6+7=24…与其他tr的colspan总数一致。

最后是第一个效果图的完整的源代码，给有需要的人

<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title></title>
	
	<style>
		body div table{
			margin: 100px auto;
		}
		body div table td{
			color: #888;
			height: 42px;
			padding-left: 5px;
		}
		img{
			width: 100%;
			height: 600%;
		}
		table{
			table-layout: fixed;
			width:40%;
		}
	</style>
	
</head>

<body>
	<div>
		<table border="1px" cellspacing="0">
			<tr>
				<td colspan="12">书    名:第一行代码——Android（第2版）</td>
				<td colspan="12">类    别:计算机/软件开发/Android开发</td>
			</tr>
			<tr>
				<td colspan="9">出版社:人民邮电出版社</td>
				<td colspan="7">用    纸:胶版纸</td>
				<td colspan="8">出版时间:2016-11 </td>
			</tr>
			<tr>
				<td colspan="10">ISBN:978-7-115-43978-9</td>
				<td colspan="5">装    帧:平装</td>
				<td colspan="9" rowspan="6"><img src="https://bkimg.cdn.bcebos.com/pic/b3119313b07eca80ece1d9ed982397dda04483d0?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5"></td>
			</tr>
			<tr>
				<td colspan="15">类    别:计算机/软件开发/Android开发</td>
			</tr>
			<tr>
				<td colspan="4">开    本:16</td>
				<td colspan="5">页    数:580</td>
				<td colspan="6">作    者:郭霖</td>
			</tr>
			<tr>
				<td colspan="10">ISBN:978-7-115-43978-9</td>
				<td colspan="5">装    帧:平装</td>
			</tr>
			<tr>
				<td colspan="15">类    别:计算机/软件开发/Android开发</td>
			</tr>
			<tr>
				<td colspan="4">开    本:16</td>
				<td colspan="5">页    数:580</td>
				<td colspan="6">作    者:郭霖</td>
			</tr>
		</table>
	</div>
</body>
</html>