`

table的css属性

    博客分类:
  • CSS
CSS 
阅读更多

 table的css属性

 

border-collapse

table元素的css样式中的border-collapse属性,表示表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。具体的值有:

separate:默认值,边框会被分开,不会忽略border-spacing和empty-cells属性

collapse:如果可能,边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性

inherit:从父元素继承border-collapse属性的值。任何版本的IE都不支持inherit。 

 

border

table的border属性,只是设置table的外边框,不会影响单元格的边框,单元格的边框需另外设置。

 

border-spacing

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

设置方法是border-spacing: 10px 20px;

如果定义一个 length 参数,那么定义的是水平和垂直间距。

如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。

还可以取inherit。

 

empty-cells

如果设置成hide,那么不会显示空白单元格的边框。

它可选的值有:hide, show, inherit

 

table-layout

固定表格布局:

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。

在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。所有列会等宽。

通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

自动表格布局:

在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

 

可选的值有:auto, fixed, inherit

 

另外w3school上,写的是automatic,而不是auto。但是实际上auto才好用。

 

分享到:
评论

相关推荐

    漂亮的Table CSS

    9. **表格内嵌样式与外部样式表**:为了代码的可维护性,通常会把CSS样式放在外部样式表中,但也可以在HTML的`<table>`、`<tr>`、`<td>`等元素内直接添加`style`属性进行快速调试或临时调整。 10. **数据可视化的...

    HTML Table 漂亮的CSS

    在网页设计中,HTML表格(Table)是一种常用的数据展示方式,而通过应用合适的CSS(Cascading Style Sheets)样式,我们可以让这些表格看起来更加美观、专业。本资源包"HTML Table 漂亮的CSS"提供了多种独立的CSS...

    css属性查询手册

    《CSS属性查询手册》是针对CSS 2.0版本的一份详尽参考资料,它为开发者提供了全面、深入的CSS属性理解和应用指南。CSS,即层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML...

    漂亮的table样式(内附css)

    "漂亮的table样式(内附css)"这个主题就是围绕如何使用CSS为HTML表格添加吸引力,使其更加美观和专业。 首先,我们需要了解HTML表格的基本结构,它由`<table>`元素开始,然后包含`<tr>`(行)元素,每个`<tr>`中...

    表格自动换行主义CSS属性

    通过以上对CSS属性的详细解析及应用实例的介绍,我们可以看出,合理利用`table-layout`、`word-break`和`word-wrap`等CSS属性,能够有效改善表格内文本的显示效果,尤其是在需要处理大量文本数据的情况下,自动换行...

    采用Table CSS实现的TabPane选项卡.rar

    Table CSS并不意味着在HTML中使用`<table>`元素,而是指通过CSS的属性和选择器模拟表格布局。这种方法可以提供更好的灵活性和控制力,同时保持内容的结构化。在Tab Pane的实现中,Table CSS可以帮助我们创建整齐且...

    CSS属性大全截图pdf

    根据提供的文件信息“CSS属性大全截图pdf”,我们可以推断出这份文档主要涵盖了CSS(层叠样式表)的各种属性。CSS是一种用于定义HTML或XML文档中元素的呈现方式的语言,它被广泛应用于网页设计中,用来控制页面布局...

    好看的css table样式

    在这个主题中,我们聚焦于“好看的css table样式”,这在创建报表、数据展示以及各种信息汇总的网页中尤其重要。 一个美观的CSS表格不仅需要清晰易读,还要具有良好的可读性和吸引力。下面我们将深入探讨如何使用...

    table转div、table转css

    2. 创建div容器:每个表格单元会被转化为一个div,而行和列则可能通过外层div和CSS的布局属性(如display: flex或grid)来实现。 3. 应用CSS样式:工具会根据表格的样式信息生成相应的CSS规则,如边框、对齐、颜色等...

    css table 表格标签

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而HTML中的`<table>`标签则是用来创建表格布局的重要元素。`<table>`标签允许我们构建复杂的表格结构,包括行(`<tr>`)、列(`...

    CSS样式Table[6] - style-table

    在这个主题"CSS样式Table[6] - style-table"中,我们将深入探讨如何使用CSS来美化和控制表格的样式。 表格在数据展示和组织信息时非常有用,但默认的HTML表格样式通常较为朴素。CSS提供了丰富的选择器和属性,让...

    CSS display属性的table表格布局

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...

    CSS3动画属性边框属性等

    本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...

    CSS Table

    在这个主题"CSS Table"中,我们将探讨如何使用CSS来创建和美化表格,以及如何制作出交互式的菜单。 CSS不仅可以改变文本的字体、颜色和大小,还能控制布局,包括表格的样式。 一、CSS与表格 在HTML中,`<table>`...

    Table常用的几种CSS样式

    - 使用`display: table`、`table-cell`和`table-row`等CSS属性,可以模拟表格布局,实现更复杂的样式效果。 - 利用`box-shadow`和`rgba()`创建阴影效果,增加表格立体感。 10. **自定义提示信息**: - 使用`:...

    利用CSS控制表格table的交替颜色

    本文将详细介绍如何通过CSS控制表格`<table>`的交替颜色,并提供具体的代码示例。 ### 一、基本原理 在HTML中,`<table>`元素用于创建表格,而`<tr>`代表表格的一行,`<td>`则表示表格中的一个单元格。CSS提供了...

    table 圆角 html5 css3

    在HTML5和CSS3的世界里,为表格(table)添加圆角效果是一项常见的美化任务,可以使得网页设计更具现代感和优雅。本文将深入探讨如何使用HTML5和CSS3实现表格的圆角效果,以及相关的知识点。 首先,HTML5虽然在语义...

    用CSS为表格添加阴影效果.rar

    我们将通过实例探讨几个关键的CSS属性和技术。 首先,了解基本的CSS阴影属性至关重要。主要有两个属性用于创建阴影效果:`box-shadow` 和 `text-shadow`。在这个案例中,我们将重点讨论`box-shadow`,因为我们需要...

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    本主题“CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo”着重讨论如何使用CSS3来创建具有圆角的表格,提升网页的视觉效果。我们将深入探讨CSS3中的相关属性和技术,以及如何通过实例代码...

Global site tag (gtag.js) - Google Analytics