HTML中的
Table相关元素元素描述
表头
表格正文表格页脚表格行作为标题的表格列作为数据的表格列列(无内容元素)一组列Table相关属性属性元素描述colspanth, td列合并
rowspanth, td行合并
spancol列合并
sortabletable允许排序
headerstd与数据相关的
元素的ID对应的空格分隔字符串scopethrow|col|rowgroup|colgroup(默认值)- 实质上指定标题的轴。默认情况下,标题是标题列,这是典型的,但是行也可能以标题开头,您可以将标题范围限定为行或行组。
Table常用样式CSS 属性可能值描述vertical-alignbaseline
sub
super
text-top
text-bottom
middle
top
bottom
%
length对齐单元格内的内容。
white-spacenormal
pre
nowrap
pre-wrap
pre-line控制文本在单元格中的换行方式。
border-collapsecollapse
separate应用于表以确定边框是否折叠成自身(类似于仅双向折叠的边距)。
border-spacinglength如果border-collapse是separate,您可以指定单元格彼此间隔的距离。现代版的cellspacing属性。说到这一点,属性padding的现代版本cellpadding。
widthlength宽度适用于表格单元格
borderlength边框
table-layoutauto
fixedauto是默认值。表格及其单元格的宽度取决于内部的内容。如果将其更改为fixed,则表格和列宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽,这可以加快渲染速度。如果后续单元格中的内容不适合,则溢出属性将确定发生的情况。
重置默认Table表格样式table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
斑马条纹表
如果未在表格单元格元素上设置背景颜色,则可以在表格行本身上设置它们。所以在最基本的情况下,您可以这样做:tbody tr:nth-child(odd) {
background: #eee;
}
我们在选择器中使用tbody,因为你不太可能想要对页眉和页脚行进行操作。
让任何元素模拟为Table表格元素行为
display模拟表格属性描述:display: table /*
display: table-cell /*
*/display: table-row /*
*/display: table-column /*
*/display: table-column-group /*
*/display: table-footer-group /*
*/display: table-header-group /* */