HTML中tr标签设置边框不显示的解决办法

最新推荐文章于 2023-12-07 15:07:35 发布

weixin_34128839

最新推荐文章于 2023-12-07 15:07:35 发布

阅读量1.9k

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/yy-hh/p/4570032.html

版权

今天在操作表格的时候发现设置表格中行的边框没有显示，然后自己新建了一个表格发现确实不显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
 }
   tr{
       border:1px solid #ccc;    
    }
</style>
<body>

<table>
   <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
   </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
   </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
   </tr>
</table>

</body>
</html>

在浏览器中预览不显示

后来查到只需要加上一句代码就显示

 table{
      border-collapse: collapse;
   }

后来查了下手册对该属性的定义

CSS border-collapse 属性

为表格设置合并边框模型：

属性定义及使用说明

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

默认值:	separate
继承:	yes
版本:	CSS2
JavaScript 语法:	object object.style.borderCollapse="collapse"

浏览器支持

所有主要浏览器都支持border - collapse属性。

注意： 任何版本的Internet Explorer（包括IE9）支持属性值"inherit"。

注意: border - collapse属性,如果没有指定!DOCTYPE，可能产生意想不到的效果。

Property Values

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

转载于:https://www.cnblogs.com/yy-hh/p/4570032.html

weixin_34128839

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中tr标签设置边框不显示的解决办法

今天在操作表格的时候发现设置表格中行的边框没有显示，然后自己新建了一个表格发现确实不显示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://...
复制链接

扫一扫