表格细边框的CSS样式怎么设置?

表格细边框的CSS样式怎么设置?,第1张

指定的<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表示表格的两边框合并为一条即可。

用js实现吧,给tr一个id:
$(document)ready(function() {
var objs=$("#tab1 tr");
for (var i=0;i<objslength;i++){
$("#"+objs[i]id)css("background",(i%2==0) 'red' : 'white');
}
});
如果是不同的颜色,就把颜色放到一个数组里面,在循环中从里面取颜色就行了

两条建议:1、考虑用多个table来拼接,如果下面一行中的列与上面一行的列对齐的,则用一个table,不相同的地方,把外层单元格合并,内层加一个table,设置内层table的列宽,以达到要求。2、考虑用div+css模拟这种不规则表格。

进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外,HTML5新增了 progress 标签,其重要程度可见一斑。
由于HTML的 progress 存在兼容性问题,本文主要讲解如何通过CSS实现一个简单的自定义进度条效果!
前端开发常用的进度条效果如下:

(环形进度条下次再讲!)
这两个算是比较有代表性的,一个的均匀的一个的不均匀的,实现起来略有不用。

以第一个为例:
这种比较简单,只需要两个 div 标签就可以了(一个标签也可以实现,后文会讲到)
原理介绍:
外层 div 用来显示进度条总长度以及背景色;内层div用来显示当前进度条进度,和当前进度条颜色。
结构如下:

样式如下:

此时效果如下:

只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了

第二种带原点的进度条
此时实现原理跟第一种类似,只是背景色替换成了背景,如下:

这两个除了颜色不一样以外其他是一样大小的!

如果上面的能理解我想这个就不难理解了吧,不过为了显得文章完整还是简单做一个demo如下:

效果如下:


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存