html中表格粗细的单位,html – 如何在CSS中使用百分比表格和单元格宽度制作固定的标题表？...

检查在另一个问题上发布的此解决方案.

Fixed Header solution.

或者直接试试这个Fiddle

标题内容放在“th”中的“div”内.此div具有绝对位置和其他样式,以将标题显示为固定.

html, body{

margin:0;

padding:0;

height:100%;

}

section {

position: relative;

border: 1px solid #000;

padding-top: 37px;

background: #500;

}

section.positioned {

position: absolute;

top:100px;

left:100px;

width:800px;

box-shadow: 0 0 15px #333;

}

.container {

overflow-y: auto;

height: 200px;

}

table {

border-spacing: 0;

width:100%;

}

td + td {

border-left:1px solid #eee;

}

td, th {

border-bottom:1px solid #eee;

background: #ddd;

color: #000;

padding: 10px 25px;

}

th {

height: 0;

line-height: 0;

padding-top: 0;

padding-bottom: 0;

color: transparent;

border: none;

white-space: nowrap;

}

th div{

position: absolute;

background: transparent;

color: #fff;

padding: 9px 25px;

top: 0;

margin-left: -25px;

line-height: normal;

border-left: 1px solid #800;

}

th:first-child div{

border: none;

}

Table attribute name

Table attribute name

Value

Value

Description

Description

alignleft, center, rightNot supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding textbgcolorrgb(x,x,x), #xxxxxx, colornameNot supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a tableborder1,""Specifies whether the table cells should have borders or notcellpaddingpixelsNot supported in HTML5. Specifies the space between the cell wall and the cell contentcellspacingpixelsNot supported in HTML5. Specifies the space between cellsframevoid, above, below, hsides, lhs, rhs, vsides, box, borderNot supported in HTML5. Specifies which parts of the outside borders that should be visiblerulesnone, groups, rows, cols, allNot supported in HTML5. Specifies which parts of the inside borders that should be visiblesummarytextNot supported in HTML5. Specifies a summary of the content of a tablewidthpixels, %Not supported in HTML5. Specifies the width of a table