CSS-表 - 芒果文档

📌 相关文章

📜 CSS-表

📅 最后修改于: 2020-10-26 04:45:35 🧑 作者: Mango

本教程将教您如何使用CSS设置HTML表的不同属性。您可以设置表的以下属性-

border-collapse指定浏览器是应该控制彼此触摸的相邻边框的外观，还是每个单元格应保持其样式。
边框间距指定表格单元格之间应出现的宽度。
字幕侧的字幕显示在元素中。默认情况下，它们呈现在文档表上方。您可以使用caption-side属性来控制表格标题的位置。
empty-cells指定在单元格为空的情况下是否应显示边框。
表格布局允许浏览器通过使用列的其余部分遇到的第一个width属性来加快表格的布局，而不必在呈现表格之前先加载整个表格。

现在，我们将通过示例了解如何使用这些属性。

边界崩溃属性

该属性可以具有两个合拢和分开的值。以下示例使用两个值-


   

   
      
         Collapse Border Example
          Cell A Collapse Example
          Cell B Collapse Example
      
      

      
      
         Separate Border Example
          Cell A Separate Example
          Cell B Separate Example

它将产生以下结果-

边境保护区

border-spacing属性指定分隔相邻单元格的距离。边界。它可以采用一个或两个值。这些应该是长度单位。

如果提供一个值，则它将同时应用于垂直和水平边框。或者，您可以指定两个值，在这种情况下，第一个是水平间距，第二个是垂直间距-

注意-不幸的是，此属性在Netscape 7或IE 6中不起作用。

现在让我们修改前面的示例，看看效果-


   

   
   
      
         Separate Border Example with border-spacing
          Cell A Collapse Example
          Cell B Collapse Example
      
      

      
      
         Separate Border Example with border-spacing
          Cell A Separate Example
          Cell B Separate Example

它将产生以下结果-

字幕端属性

caption-side属性使您可以指定元素的内容应放在与表的关系中的位置。下表列出了可能的值。

此属性可以具有top，bottom，left或right四个值之一。以下示例使用每个值。

注意-这些属性可能不适用于IE浏览器。


   

   
   
      
         
            This caption will appear at the top
         
          Cell A
          Cell B
      
      

      
      
         
            This caption will appear at the bottom
         
          Cell A
          Cell B
      
      

      
      
         
            This caption will appear at the left
         
          Cell A
          Cell B
      
      

      
      
         
            This caption will appear at the right
         
          Cell A
          Cell B

它将产生以下结果-

空单元格属性

empty-cells属性指示没有任何内容的单元格是否应显示边框。

此属性可以具有三个值之一-show，hide或Inherit 。

这是用于隐藏

元素中的空单元格边框的empty-cells属性。

	Title one	Title two
Row Title	value	value
Row Title	value

它将产生以下结果-

表格布局属性

table-layout属性应该可以帮助您控制浏览器应如何呈现或布置表。

此属性可以具有以下三个值之一： fixed，auto或Inherit 。

下面的示例显示这些属性之间的区别。

注–许多浏览器不支持此属性，因此不要依赖此属性。


   
   
   
   
      
         
            1000000000000000000000000000
            10000000
            100
         
      
      

      
      
         
            1000000000000000000000000000
            10000000
            100

它将产生以下结果-