CSS设置表格边框 border:1px 怎么显示不出来

发布网友发布时间：2022-04-20 02:07

共3个回答

懂视网时间：2022-04-20 06:28

上周五突然接到现场的一个需求，做一个移动端的劳模展示页面。现场美工把原型图发了过来。这个样子的：

[移动端] IOS下border-image不起作用的解决办法0
说实在的很想吐槽一下我们美工的审美哈，不过这不是重点。

因为边框是需要特殊花纹的所以打算用border-image实现。

 .example{
 ……

 border:6px solid transparent;
 -webkit-border-image:url(../img/border_img.jpg) 6 6 round;
 border-image:url(../img/border_img.jpg) 6 6 round;
 ……
 }

最终发现安卓显示正常。IOS边框是显示不出来的。

解决办法是：
把 border:6px solid transparent; 替换为单独的属性，即：border-style 和 border-width。

 .example{
 ……
 border-style: solid;
 border-width: 6px;
 -webkit-border-image:url(../img/border_img.jpg) 6 6 round;
 border-image:url(../img/border_img.jpg) 6 6 round;
 ……
 }

希望对大家有帮助。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

热心网友时间：2022-04-20 03:36

因为是仅仅设置了边框是1像素，没有指定颜色和线的类型。只占用了空间而没有显示出来

1、正确的使用该属性的方法是：border:width style color，如border:1px solid red 即指定边框是1像素的红色的实线。

2、正确的代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 2px solid #090;
}
</style>
</head>
<body>
<div></div>

</body>
</html>

显示效果如下：

热心网友时间：2022-04-20 04:54

1、相关设置
单元格边距(表格填充)(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>
2、文字居中
代码如下：
<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>
3、每一个表格都是一个完整的方框，如果想要线条更细。
看如下代码：
<style type="text/css">.onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699 ;padding:20px;color:#FFF;}</style><table border='1'cellspacing="0" cellpadding="20" > <tr> <td class='onecenter'>1</td> <td class='onecenter' style='border-left:0px;border-right:0px;' >2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter' style='border:0px'> b</td> <td class='onecenter' > c</td> </tr > <tr id='se'> <td class='onecenter' ></td> <td class='onecenter' ></td> <td class='onecenter' ></td> </tr> </table>
分享