Solution to the problem that the border set by the tr tag in HTML is not displayed_html/css

Solution to the problem that the border set by the tr tag in HTML is not displayed_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:42:56

Original

2008 people have browsed it

When I was operating the table today, I found that the borders of the rows in the table were not displayed. Then I created a new table and found that it was indeed not displayed.

<!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>

Copy after login

In The preview in the browser does not display

Later I found that I only need to add a line of code to display

 table{      border-collapse: collapse;   }

Copy after login

Later, I checked the manual’s definition of this attribute

CSS border-collapse attribute

Set a merged border model for the table:

Attribute definition and usage Description

The border-collapse attribute sets whether the table's borders are merged into a single border, or displayed separately as in standard HTML.

默认值: 继承: 版本: JavaScript 语法:

separate

yes

CSS2

object object.style.borderCollapse="collapse"

Browser Support

All major browsers support the border-collapse attribute.

Note: Any version of Internet Explorer (including IE9) supports the attribute value "inherit".

Note: border-collapse attribute, if !DOCTYPE is not specified, may produce unexpected effects.

Property Values

值说明

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