html表格纵向变横向,html表格，表头竖向固定，横向滚动的例子

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

head:first-child+body thead[class].fixedHeader th {

width: 200px

}

head:first-child+body thead[class].fixedHeader th + th {

width: 250px

}

head:first-child+body thead[class].fixedHeader th + th + th {

border-right: none;

padding: 4px 4px 4px 3px;

width: 316px

}

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */

/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */

/* Add 16px to last TH for scrollbar padding */

/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */

head:first-child+body tbody[class].scrollContent td {

width: 200px

}

head:first-child+body tbody[class].scrollContent td + td {

width: 250px

}

head:first-child+body tbody[class].scrollContent td + td + td {

border-right: none;

padding: 2px 4px 2px 3px;

width: 300px

/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */

top: expression(document.getElementById("tableContainer").scrollTop)

}

-->

Header 1Header 2Header 3Header 4Header 5Header 6Header 7

Cell Content 1Cell Content 2Cell Content 3Cell Content 4Cell Content 5Cell Content 6Cell Content 7More Cell Content 1More Cell Content 2More Cell Content 3More Cell Content 4More Cell Content 5More Cell Content 6More Cell Content 7