CSS 表格属性

html-css014

CSS 表格属性,第1张

CSS表格属性用于设置HTML表格的样式，HTML表格由 <table></table> 标签嵌套 <tbody>， <tr>， <td>等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。

CSS表格属性：

显示表格边框有时候特别重要，它能让表格结构更清晰。

默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

内嵌标签： thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)

属性：align ，bgcolor ，bordercolor，border ，cellpadding ，cellspacing ，frame ，width ，summary ，rules 。

现在的table的属性基本已经过时，都使用css进行设置table样式。

1.border-collapsecollapse | separate

collapse : border线合并

separate： border线分隔，默认属性

ps: 使用collapse 此属性时， border-spacing 、empty-cells和 border-radius 失效 ，无任何效果。

2.border-spacinghorizontal <length >| vertical <length >

3.vertical-align 设置内容与图片位置

4.table-layout auto | fixed

ps: auto 表格布局自适应宽度

fixed 表格布局固定宽度，文字内容等可能会溢出

5.caption-side 针对于caption标签的css样式设置

6.empty-cells 但单元格内无内容时候，可设置隐藏

参考：

https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3

https://css-tricks.com/almanac/properties/b/border-collapse/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table

这是设置的边框，将边框的样式设置为 dashed就行，举个例子：

table{

width: 320px

height: 320px

}

tr td{

border:1px dashed #333

}

可以这样写