스크롤 div의 맨 아래에 각 꼬리표 꼬리표를 이동해야하는 시나리오가 있습니다. 다음은 plnkr입니다.jquery를 사용하여 동적으로 스크롤 div의 아래쪽으로 표 바닥 글 이동
나는
$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);
코드 내 이동할 수 있습니다하지만 난 260을 계산 싶어 해. 도움이 필요하다.
전체 컨테이너의 아래쪽 위치를 계산하고 바닥 글 머리글과 가로 스크롤 막대의 높이를 빼야합니다. 꼬리말 행 th 요소의 최상위 위치를 가져옵니다.
$('.sticky-table.sticky-headers').offset().top //top of the container
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container)
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers
- 11 //Fixed height of the scrollbar
작성일 업데이트 됨 plunker.
감사합니다. 이 코드를 통해 고정 된 머리글, 열 및 바닥 글 테이블을 만들면서 목표를 달성했습니다. –
이것은 간단한 CSS 몇 줄을 사용하여 얻을 수 있습니다. 이를 통해 jQuery의 높이와 위치를 기반으로 복잡한 계산을 수행 할 필요가 없으며 필요한 경우 반응 형이라는 이점이 추가되었습니다.
목표는 .sticky-table 요소의 맨 아래에 절대적으로 tfoot 요소를 배치하는 것입니다.
이렇게하려면 .sticky-table을 position: relative;, tfoot을 position: absolute; bottom: 0;으로 지정할 수 있습니다. 이처럼
.sticky-table {
/* ...existing styles */
position: relative;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
:
/* Styles go here */
.sticky-table {
position: relative;
max-width: 100%;
max-height: 500px;
height: 500px;
overflow: auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0 !important;
}
.sticky-table table {
margin-bottom: 0;
width: 100%;
max-width: 100%;
border-spacing: 0;
}
.sticky-table table tr.sticky-row th,
.sticky-table table tr.sticky-row td {
background-color: #fff;
border-top: 0;
position: relative;
outline: 1px solid #ddd;
z-index: 5;
}
.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell {
background-color: #fff;
outline: 1px solid #ddd;
position: relative;
z-index: 10;
}
.sticky-table table tr.sticky-row td.sticky-cell,
.sticky-table table tr.sticky-row th.sticky-cell {
z-index: 15;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
.sticky-table::-webkit-scrollbar {
width: 0.7em;
height: 0.7em;
}
.sticky-table::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.sticky-table::-webkit-scrollbar-thumb {
background-color: #b37e7e;
outline: 1px solid slategrey;
border-radius: 5px;
}<div class="row">
<div class="col-md-12">
<div class="sticky-table sticky-headers">
<table class="table table-striped table-striped">
<thead>
<tr class="sticky-row">
<th>Campaign Name</th>
<th>Ad Sets</th>
<th>Ads</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-cell">Demo Campaign</td>
<td class="sticky-cell">100</td>
<td class="sticky-cell">200</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
</tr>
<tr>
<td class="sticky-cell">Demo Campaign</td>
<td class="sticky-cell">100</td>
<td class="sticky-cell">200</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
</tr>
</tbody>
<tfoot>
<tr class="sticky-row">
<th class="sticky-cell">Demo Campaign</th>
<th class="sticky-cell">100</th>
<th class="sticky-cell">200</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
계산 무슨 목적으로? 얼마나 많은 행이 있는지에 따라 바닥으로 이동하는 데 필요한 거리를 계산한다는 의미입니까? – zer00ne
상단에서 거리를 정의하는 대신 하단에서'.css ('bottom', 0);으로 거리를 시도해 보셨습니까? – Adriano
이것을 해결하기 위해 jQuery를 사용할 필요가 없습니다. 몇 줄의 CSS 만 있으면됩니다. 이 방법을 보여주는 솔루션을 제공했습니다. –