免费教程
CSS 中提供了一些属性,通过这些属性您可以修改表格的样式,大大改善表格的外观。
Web前端教程
Web前端入门教程:CSS表格样式(1)
来源:易牛云朗沃
  |  
发布时间:2021-10-16 23:02
  |  
关键词:Web前端入门
  |  
阅读量:

在网页中我们通常使用表格来展示一些数据,例如成绩表、财务报表等,但是默认情况下表格的样式并不美观,甚至不符合页面的风格。CSS 中提供了一些属性,通过这些属性您可以修改表格的样式,大大改善表格的外观。

table-layout:设置表格的布局算法,布局算法有两种,分别为固定表格布局算法和自动表格布局算法;

border-collapse:设置表格中单元格的边框是合并在一起还是按照标准的 HTML 样式分开;

border-spacing:设置当表格边框分开时,相邻两个边框在横向和纵向上的间距;

caption-side:设置表格标题相对于表格的位置;

empty-cells:设置当表格的单元格中没有内容时,是否显示该单元格的边框。

1. table-layout

table-layout 属性用来设置表格布局时所用的布局算法,属性的可选值如下:

Web前端入门

1) 固定表格布局

固定表格布局允许浏览器更快地对表格进行布局。在固定表格布局中,表格的水平宽度仅取决于列宽度、表格边框宽度、单元格间距等因素,与单元格中的内容无关。也就是说,表格中超出表格宽度的内容可能会被忽略。

2) 自动表格布局

在自动表格布局中,列的宽度视单元格中的内容(没有换行的最宽内容)而定,也就是说如果某个单元格的宽度为 100px,但单元格中内容所占据的宽度要大于 100px,这就会导致单元格中的内容将单元格撑大。正是因为这一特点,此种算法可能会比较慢。

2. border-collapse

border-collapse 属性用来设置是否合并表格中相邻的边框,属性的可选值如下:

Web前端入门

【示例】通过 border-collapse 属性来合并或拆分单元格的边框:

Web前端入门

运行结果如下图所示:

Web前端入门

默认情况下表格的边框是隐藏的,所以上面示例中我们需要使用<table>标签的 border 属性来显示边框,另外,您也可以使用 CSS 的 border 属性来为表格设置边框,如下所示:

Web前端入门

点击知道更多编程知识

文章来源于网络