का उपयोग करके गतिशील रूप से स्क्रॉलिंग div के नीचे तालिका फ़ूटर को ले जाएं मेरे पास एक परिदृश्य है जिसमें मुझे स्क्रॉलिंग div के नीचे टेबल फ़ूटर पंक्ति के प्रत्येक वें टैग को स्थानांतरित करना है। यहां plnkr है।jquery
मैं इसे
$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);
द्वारा hardcoded स्थानांतरित कर सकते हैं, लेकिन मैं 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 बनाया गया।
धन्यवाद। मैं निश्चित हेडर, कॉलम और पाद लेख तालिका बनाने के लिए इस कोड के माध्यम से अपना लक्ष्य प्राप्त करता हूं। –
यह सीएसएस की कुछ सरल रेखाओं के साथ हासिल किया जा सकता है। यह 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 ('नीचे', 0) के साथ नीचे से दूरी की कोशिश की है;'? – Adriano
इसे हल करने के लिए jQuery का उपयोग करने की आवश्यकता नहीं है। सीएसएस की कुछ सरल रेखाएं जरूरी हैं। मैंने इस विधि को दिखाते हुए एक समाधान प्रदान किया है। –