CSS样式_表格&轮廓

CSS表格

表格边框 [border]

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

上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用折叠边框(border-collapse)属性。

折叠边框 [border-collapse]

• 该属性设置是否将表格边框合并为单一的边框。该属性只针对table。取值为：seperate(默认), collapse
• 注意: 如果没有规定!DOCTYPE, 则border-collapse可能产生意想不到的结果。

table { border-collapse:collapse; }

表格宽度和高度 [width], [height]

• 定义表格(table, th, td等)的宽度和高度

table { width:100%; }
th    { height:50px; }

表格文本水平对齐 [text-align]

td    { text-align:right; }

表格文本垂直对齐 [vertical-align]

td { height:50px; vertical-align:bottom; }

表格内边距 [padding]

• 设置表格中内容(th, td)与边框的距离

td { padding:15px; }

表格文本颜色 [color]

• 设置表格(table, th, td)的文本颜色

table { color:blue; } <!-- td的文本为蓝色 -->
th    { color:red;  } <!-- th的文本为红色 -->

表格背景颜色 [background-color]

• 设置表格(table, th, td)的背景颜色

table { background-color:blue; } <!-- td的背景色为蓝色 -->
th    { background-color:red;  } <!-- th的背景色为红色 -->

单元格边框间距 [border-spacing]

• 该属性设置相邻单元格的边框间的距离
• 注意: 仅用于“边框分离”模式

table.two
{
    border-collapse: separate;
    border-spacing : 10px 50px; <!-- 水平间距10px, 垂直间距50px -->
}

表格标题的位置 [caption-side]

• 设置表格标题放置的位置，取值可为top, bottom。

caption
{ caption-side:bottom }

是否显示空单元格 [empty-cells]

• 设置是否显示空单元格，取值可为hide, show。
• 注意: 仅用于“边框分离”模式

table
{ border-collapse: separate; empty-cells : hide; }

表格布局 [table-layout]

• 此属性设置表格的行、列将如何显示，取值可为fixed, automatic。
• 固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的HTML表。

table.one
{ table-layout: automatic }

布局类型	特点
固定表格布局	固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局	在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

CSS轮廓

轮廓颜色 [outline-color]

p 
{ outline-color:#00ff00; }

轮廓样式 [outline-style]

p 
{ outline-style:dotted; }

轮廓宽度 [outline-width]

p
{ outline-width:thick; }

以上的属性可简写与outline，如：

p 
{ outline:#00ff00 dotted thick; }

更多请参考：W3School