मैं एक div के अंदर एक सारणी तालिका बनाने की कोशिश कर रहा हूं जिसमें निश्चित ऊंचाई और चौड़ाई है।
हालांकि, अगर डिव की पूरी चौड़ाई या ऊंचाई को भरने के लिए डेटा के पर्याप्त कॉलम/पंक्तियां नहीं हैं, तब भी टेबुलेटर टेबल पूरी ऊंचाई/चौड़ाई पर कब्जा कर लेगा, केवल खाली जगह में ग्रे रंग भरेगा।
मैं इस ग्रे क्षेत्र से कैसे छुटकारा पा सकता हूं? ध्यान दें कि मैं पंक्तियों और न ही स्तंभों का आकार बदलना नहीं चाहता।
function create_table() {
let table = new Tabulator("#table", {
data: [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
],
columns:[
{title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'},
]
})
}
create_table()#table {
height: 200px;
width: 200px;
}<!DOCTYPE HTML>
<html>
<head>
<!-- Tabulator -->
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>3 जवाब
इस समय आपके पास तालिका के लिए दो प्रदर्शन विकल्पों में से एक है:
- यदि आप टेबल पर ऊंचाई निर्दिष्ट करते हैं तो यह उस ऊंचाई को ले जाएगा और किसी भी अतिप्रवाह को सही ढंग से प्रबंधित किया जाएगा और स्क्रॉलिंग की अनुमति होगी, यदि तालिका को भरने के लिए पर्याप्त पंक्तियां नहीं हैं तो यह अभी भी उतनी ही जगह लेती है और आप तालिका पृष्ठभूमि देखते हैं
- यदि आप टेबल पर ऊंचाई निर्दिष्ट नहीं करते हैं तो यह मानता है कि आप इसे उतनी ही ऊंचाई तक ले जाना चाहते हैं जितनी पंक्तियां हैं और तालिका में बाहरी div स्क्रॉलिंग को संभालेगा
तो आपके परिदृश्य में आप इसे और अधिक फिट करने के लिए पृष्ठभूमि रंग बदलने पर विचार कर सकते हैं, लेकिन अतिरिक्त स्थान को छिपाने का कोई तरीका नहीं है।
आगामी संस्करण 4.6 (2020 की शुरुआत में) में एक नया डिस्प्ले मोड होगा जो दोनों के बीच एक हाइब्रिड है, जो टेबल को ओवरफ्लो होने तक विस्तारित करने की अनुमति देगा और फिर टेबल के अंदर स्क्रॉलिंग को हैंडल करेगा।
मैंने height को max-height में बदल दिया है। क्या यह आपकी समस्या का समाधान करता है? कितनी भी पंक्तियाँ क्यों न हों, तालिका की ऊँचाई 200px से अधिक नहीं होगी।
div की चौड़ाई को समायोजित करने के लिए display: inline-block और max-width: 200px को भी जोड़ा है। एक बार टेबल की चौड़ाई और/या ऊंचाई उसके div में परिभाषित अधिकतम सीमा तक पहुंचने के बाद आप टेबल को किसी भी या दोनों दिशाओं में स्क्रॉल करने योग्य बना सकते हैं।
function create_table() {
let table = new Tabulator("#table", {
data: [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
],
columns:[
{title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'},
]
})
}
create_table()#table {
display: inline-block;
max-height: 200px;
max-width: 200px;
}<!DOCTYPE HTML>
<html>
<head>
<!-- Tabulator -->
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>ar selectedCount = function() {
var selectedRows = $("#example-table").tabulator("getSelectedRows").length;
$('#rowCount').text(selectedRows);
}
$("#example-table").tabulator({
height: 205,
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ {title: 'Name', field: 'name'},
{title: 'Surname', field: 'surname'}
],
});
var tabledata = [
{name: 'John', surname: 'Miller'},
{name: 'Mike', surname: 'Tyson'},
];
//load sample data into the table
$("#example-table").tabulator("setData", tabledata);
selectedCount();<div id="example-table"></div>
<p>
Number of selected rows = <span id="rowCount"></span>
</p>As per my understanding, Please check the documentation provided to make the
columns to fit for the parent container http://tabulator.info/examples/4.4?#fittowidth
Please check the working example in the following https://jsfiddle.net/gzx72ukh/