[英]Double Horizontal Scroll on Table - JQuery
我正在嘗試添加雙水平滾動 - 一個在桌子上方,一個在它下方。 表格“必須基於百分比”而不是固定寬度。 我如何使用 JQuery 完成此操作?
我需要表格跨越 100% 的寬度並有 2 個同步的滾動條。 有很多內容,底部滾動條從用戶那里消失了......
JSFIDDLE - https://jsfiddle.net/rbla/8usk97ch/6/
HTML
<div style="overflow-x:auto;">
<table id="select" class="info">
<thead>
<tr class="row">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
</tr>
</thead>
<tbody>
<td>content 1</td>
<td>content 2</td>
<td>content 3</td>
<td>content 4</td>
<td>content 5</td>
<td>content 6</td>
<td>content 7</td>
<td>content 8</td>
<td>content 9</td>
<td>content 10</td>
<td>content 11</td>
<td>content 12</td>
<td>content 12</td>
<td>content 14</td>
<td>content 15</td>
<td>content 16</td>
<td>content 17</td>
<td>content 18</td>
<td>content 19</td>
<td>content 20</td>
</tbody>
</table>
</div>
CSS
table.info {
width: 98%;
margin: 0 1%;
border-collapse: collapse;
}
.row {
background:#CCC;
}
td {
white-space: nowrap;
}
添加一個水平滾動的 div:
<div id="scroll1" style="overflow-x:auto;">
<div style="height: 1px;margin: 0 1%;"></div>
</div>
然后通過 jQuery 同步兩個滾動事件。
$("document").ready(function(){
$("#scroll1 div").width($("#select").width());
$("#scroll1").on("scroll", function(){
$("#scroll2").scrollLeft($(this).scrollLeft());
});
$("#scroll2").on("scroll", function(){
$("#scroll1").scrollLeft($(this).scrollLeft());
});
});
這是我的jsFiddle示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.