html+css表格的边框显示是双线,怎样变成像word中的表格一样?

html+css表格的边框显示是双线,怎样变成像word中的表格一样?,第1张

html+css表格边框显示是双线,想要变成像和word中的表格一样可以在table加一个样式:border-collapse: collapse;

用CSS设置html中的表格边框样式

一、边框样式值如下:

none :无边框。与任何指定的border-width值无关

hidden :隐藏边框。IE不支持

dotted :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为点线。否则为实线(常用)

dashed :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为虚线。否则为实线(常用)

solid :实线边框(常用)

double :双线边框。两条单线与其间隔的和等于指定的border-width值

groove :根据border-color的值画3D凹槽

ridge :根据border-color的值画菱形边框

inset :根据border-color的值画3D凹边

outset :根据border-color的值画3D凸

二、相关设置

单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。具体代码如下:

<table border='1'cellspacing="0" cellpadding="0" > <tr> <td width="200">1</td> <td width="200">2</td> <td width="200">3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>中国</td> <td>我</td> <td>爱你</td> </tr> </table>

三、文字居中设置

代码如下:

<style type="text/css">onecenter{text-align:center;width:200px;}</style><table border='1'cellspacing="0" cellpadding="0" > <tr> <td class='onecenter'>1</td> <td class='onecenter'>2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter'> b</td> <td class='onecenter' > c</td> </tr > <tr> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

写CSS啊,<td>标签

td {

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: #000000;

border-bottom-color: #000000;

}

border-bottom: 1px dotted #000;这是一种方法,还有一种方法就是使用背景例子如下:
showLine {
float:left;
height:10px;
width:100%;
border:0;
background:url(/images/xianpng) center bottom no-repeat;//此处为做好的点线图
}

楼上那些都跟楼主提问的这个线不一样
两种方法
一种是截图做成背景 让它平铺
另一种方法就是直接写符号 下面这种符号
````````````````````````````````````````````````````````
你可以放到网页上看一下 前两天刚做了这种效果

在网上找了好几种方法,结果做完后,效果都不理想,有时候修改表格中的内容后,边框线就莫名其妙的没有了。最终试了一下,还是利用加表格背景色的方法还是保险一点。方法如下:

1、在中加入style="background-color:#333333"语句。

2、在后续的中加入style="background-color:#ffffff"语句。

这种方法在宁夏教育公共服务平台中运行,完全可以,但在其他网站中就不太清楚了。

当然,如果有更好的方法,也请大家多多指教。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存