我需要你的帮助。
如何修改HTML / CSS编码,以便在用户水平向左和向右滚动时允许列和数据与其同步移动。现在,当用户向后滑动水平条和第四个时,我的列不能正确排列?
<!DOCTYPE html>
<html>
<head>
<!-- Upgrade MSIE5.5-8 to be compatible with modern browsers -->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
/* ----- Scrolling Table ----- */
.dataGridHeader {
position:relative;
padding-top:24px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
.dataGridContent {
overflow-x:scroll;
overflow-y:scroll;
height:144px;
}
.dataGridHeader thead tr {
position:absolute;
top:0;
left:0;
}
.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td {
text-align:left;
height:0;
}
table.scrolltablestyle {
border-top: 1px solid #D9D9D9;
table-layout: fixed;
width: 1100px;
}
table.scrolltablestyle tbody tr td{
background: #fff;
text-align:left;
padding: 4px 9px;
border-right: 1px solid #999;
}
table.scrolltablestyle thead tr th{
background-color: #FFFFD9;
font-weight: normal;
text-align:left;
padding: 4px 9px 4px 9px;
border-bottom: 1px solid #999;
}
table.scrolltablestyle thead tr th {
border-right: 1px solid #999;
border-top: 1px solid #999;
}
table.scrolltablestyle tbody tr td{
border-right: 1px solid #999;
width: 200px;
}
table.scrolltablestyle tbody tr:last-child td{
border-bottom: 0;
}
</style>
</head>
<body>
<div class="dataGridHeader">
<div class="dataGridContent">
<table cellpadding="0" cellspacing="0" class="scrolltablestyle">
<thead>
<tr>
<th>Shopper Name</th>
<th> </th>
<th> </th>
<th>First Name</th>
<th>Last Name</th>
<th>User ID</th>
<th>Status</th>
<th>TestColumn</th>
</tr>
</thead>
<tbody>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
嗨Jhon刚从此课程中删除position:absolute
.dataGridHeader thead tr
{
/*position:absolute;*/ //* this is the problem*/
}
答案 1 :(得分:0)
查看OP的代码,似乎意图创建一个具有垂直固定标题行和滚动正文的表。几乎所有我见过的具有流畅宽度的纯CSS滚动表设计都有同样的问题:当横向滚动时,列标题不会留在列中。接受的答案确实解决了这个问题,但它也禁用了垂直固定的标题,实质上将其转换为标准表格。
对于保持垂直固定标题同时允许正确水平滚动的解决方案,请查看此处: jsfiddle
代码:
<强> HTML 强>
<div class="scrollingtable">
<div>
<div>
<table>
<caption>Top Caption</caption>
<thead>
<tr>
<th><div label="Column 1"/></th>
<th><div label="Column 2"/></th>
<th><div label="Column 3"/></th>
<th>
<!--more versatile way of doing column label; requires 2 identical copies of label-->
<div><div>Column 4</div><div>Column 4</div></div>
</th>
<th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
</tr>
</thead>
<tbody>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
<tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
</tbody>
</table>
</div>
Faux bottom caption
</div>
</div>
<强> CSS 强>
<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->
<style>
/*the following html and body rule sets are required only if using a % width or height*/
html {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0 20px 0 20px;
text-align: center;
}
.scrollingtable {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: auto; /*if you want a fixed width, set it here, else set to auto*/
min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
height: 188px/*100%*/; /*set table height here; can be fixed value or %*/
min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
font-family: Verdana, Tahoma, sans-serif;
font-size: 16px;
line-height: 20px;
padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
position: relative;
border-top: 1px solid black;
height: 100%;
padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
top: 0;
background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}
.scrollingtable > div > div {
min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
max-height: 100%;
overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
overflow-x: hidden;
border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
width: 100%;
border-spacing: 0;
margin-top: -20px; /*inverse of column header height*/
margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
position: absolute;
top: -20px; /*inverse of caption height*/
margin-top: -1px; /*inverse of border-width*/
width: 100%;
font-weight: bold;
text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
vertical-align: bottom;
white-space: nowrap;
text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block;
padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 20px; /*match column header height*/
border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
position: absolute;
top: 0;
white-space: pre-wrap;
color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
content: "";
display: block;
min-height: 20px; /*match column header height*/
padding-top: 1px;
border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
position: absolute;
width: 100px;
top: -1px; /*inverse border-width*/
background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
content: "";
display: table-cell;
position: relative;
padding: 0;
border-top: 1px solid black;
top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid black;
padding: 0 6px 0 6px;
height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/
</style>