css中用td实现进度条功能，完成的显示为实线，没有完成的显示为虚线。

html-css053

css中用td实现进度条功能，完成的显示为实线，没有完成的显示为虚线。,第1张

border: 1px dotted #000

1px 是边框大小

dotted是虚线，当然dashed也是但会间隔会大点，看你自己的需要了

#000是颜色

这就是css啊 嵌套的CSS而已内联：<html><head><title></title><style type="text/css"><!--.class1{border-bottom:1px dashed #00cccc}--></style></head><body><div class="class1"></div></body><html>外联：<link href="样式表文件路径.css" rel="stylesheet" type="text/css" />

可以通过设置单元格元素td的边框样式来实现：

border: width style color  /*分别设置边框的粗细、样式和颜色*/

示例如下：

在HTML代码中给出两个表格

<table class="tb1">

<tr><td>有</td><td>志</td><td>者</td></tr>

<tr><td>事</td><td>竟</td><td>成</td></tr>

</table>

<table class="tb2">

<tr><td>苦</td><td>心</td><td>人</td></tr>

<tr><td>天</td><td>不</td><td>负</td></tr>

</table>

分别设置不同的样式

table{ /* 表格整体样式 */

margin:50px  /* 外边距50px */

border-collapse:collapse /* 合并为单一的边框线 */

}

/* 设置tb1类的表格样式 */

table.tb1 td{padding:10pxborder:1px solid green}

/* 设置tb2类的表格样式 */

table.tb2 td{padding:20pxborder:5px dashed blue}

最终效果如下