html不对齐、不规则表格的实现
做html页面的时候,要做一个单元格边线不对齐的表格,百度没找到相关的资料,(可能因为我不懂描述我的问题~)后面了解到table标签有个table-layout:fixed;的样式,激发了我的灵感,先看效果图。
一、效果图
一时间没找到什么好的例子,就随便做了一个,内容重复是因为不知道写什么了,敷衍一下。“不对齐”表现在每个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;
}
效果图
可以看到,表格按照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;样式。
效果图
可以看到,表格的第一行有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的宽度,可自行尝试。
效果图
对比上面一个,这个表格的【书名单元格】右侧必须与 【用纸单元格】右侧对齐,即便【书名单元格】的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>