CSS 表格

CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

 

 

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit	规定应该从父元素继承 border-spacing 属性的值。

 

 

caption-side 属性设置表格标题的位置

指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

 

 

empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

隐藏表格中空单元格上的边框和背景：empty-cells:hide;

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

 

tableLayout 属性用来显示表格单元格、行、列的算法规则

固定表格布局：

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

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

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

自动表格布局：

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

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

说明

该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。

 

 

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

table,th,td
{
border:1px solid blue;
}

 

 

折叠边框

 border-collapse 属性设置是否将表格边框折叠为单一边框：

 border-collapse:collapse;

 

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

 

<style type="text/css">
table
  {
  border-collapse:collapse;
  }

table, td, th
  {
  border:1px solid black;
  }
</style>

 

 

 

表格宽度和高度

<style type="text/css">
table,td,th
{ border:1px solid black;}
table
{width:100%;}
th
{height:50px;}
</style>

 

 

 

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

 

 

表格内边距

 如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性

 

转载于:https://www.cnblogs.com/mkl7/p/10870359.html