<50分>纯CSS设置表格样式

<50分>纯CSS设置表格样式,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">这是设置的边框,将边框的样式设置为 dashed就行,举个例子:
table{
width: 320px;
height: 320px;
}
tr td{
border:1px dashed #333;
}
可以这样写

指定的<table>为细边框,把<table>放在<div>中即可。

一、首先新建表格,代码如下:

<table width="500" border="1">  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr><tr>  <td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td></tr</table>。

二、在table里加css样式,代码如下:

<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">  <tr> <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td </tr> <tr> <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></table>。

三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离,border-collapse:collapse表示表格的两边框合并为一条即可。

<td colspan="3" ><textarea name="msg" cols="38" rows="5" class="textarea ipt-txt"></textarea></td>
因为你后面没有内容了 所以用td的 colspan属性 他等于3 就会向后占用3个td位置 也就是把3个td合并成1个 你要的效果就出来喽!

表格的边框分为3个元素决定:table,th,td;
如果三种元素全部设置了border样式,那么会发现外层有2层border,里面的th与th,td与td,td与th之间的border也是有2层的,所以,在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多,那么我们只能选择适合自己的-也就是用的习惯的)。另外,表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse; border-spacing:0;}清除这些多余的空间,那么有了上面的准备工作之后,下面就开始border样式的设置--代码如下:
td,th{border-bottom: 1px solid #e3e3e3;//xia下边框border-right:1px solid #e3e3e3;//有边框}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13325937.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-15
下一篇 2023-07-15

发表评论

登录后才能评论

评论列表(0条)

保存