如何设置表格的折叠边框模型？ - 芒果文档

📌 相关文章

📜 如何设置表格的折叠边框模型？

📅 最后修改于: 2021-08-31 06:43:33 🧑 作者: Mango

CSS 描述了 HTML 元素的显示方式。有多种 CSS 属性可以为基本的 HTML 文档增添魔力。

这篇文章的重点是为 HTML 的 table 元素设置折叠边框模型。

HTML 表格允许我们使用行和列来排列数据。

标签定义了一个 HTML 表格。每个表格行都用标签定义。每个表头都定义了一个

标签。每个表格数据/单元格都用

标签定义。让我们看看我们如何构建一个可以代表四名学生在各自科目中的分数并为其设置折叠边框的表格，如下所示。

示例 1：本示例描述了 HTML 表格的基本示例。

HTML



  

    css collapse borders

  

    
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    Id Name Physics Chemistry Maths
100 Tanmay 98 96 93
101 Sunaina 90 92 91
102 Tanisha 89 86 83
103 David 97 95 94

HTML



  

    CSS border collapse
    

  

    
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    Id Name Physics Chemistry Maths
100 Tanmay 98 96 93
101 Sunaina 90 92 91
102 Tanisha 89 86 83
103 David 97 95 94

HTML



  

    CSS border collapse
    

  

    
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    Id Name Physics Chemistry Maths
100 Tanmay 98 96 93
101 Sunaina 90 92 91
102 Tanisha 89 86 83
103 David 97 95 94

输出：

HTML表格

示例 2：在此示例中，我们将使用CSS 边框属性为其添加一些边框，如下例所示。

HTML



  

    CSS border collapse
    

  

    
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    Id Name Physics Chemistry Maths
100 Tanmay 98 96 93
101 Sunaina 90 92 91
102 Tanisha 89 86 83
103 David 97 95 94

输出：

带边框的 HTML 表格

将边框添加到我们的表格后，我们会得到如上所示的输出。但这可能不是所需的输出，所以让我们尝试使用折叠这些边框来获得更统一的输出 边界坍塌 属性并将其值设置为折叠，如下一个示例所示。

示例 3：

HTML



  

    CSS border collapse
    

  

    
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
            
        
    Id Name Physics Chemistry Maths
100 Tanmay 98 96 93
101 Sunaina 90 92 91
102 Tanisha 89 86 83
103 David 97 95 94

输出：

带有折叠边框的表格

这是我们需要的输出，所以最后我们学会了如何设置表格的折叠边框。要记住的一点是，当设置为折叠值时，边框间距属性对边框折叠属性没有影响。