我正在制作一个带有表格数据的页面,可以使用主页面滚动条滚动,但保持表格标题可见。页面顶部有一个页眉,页面底部有一个分页区域。
我在这里尝试了一下。
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};

.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: 90px;
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
}

<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->
&#13;
唯一的问题是当我向下滚动时,表格标题类型的折叠并且不会与表格主体的列保持对齐。我该如何解决?
答案 0 :(得分:2)
您可以将.data thead.fixed th
规则调整为width: calc(700px/3);
,如下所示:
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};
.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: calc(700px/3);
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->