Heim >Web-Frontend >HTML-Tutorial >HTML中tr标签设置边框不显示的解决办法_html/css_WEB-ITnose

HTML中tr标签设置边框不显示的解决办法_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:562015Durchsuche

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

<!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 中那样分开显示。

默认值: 继承: 版本: JavaScript 语法:
separate
yes
CSS2
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 属性的值

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn