টেবিলের উচ্চতা কীভাবে নির্দিষ্ট করা যায় যে উল্লম্ব স্ক্রোল বারটি উপস্থিত হয়?

Question

আমার পৃষ্ঠায় অনেকগুলি সারি সহ একটি টেবিল রয়েছে। আমি টেবিলের উচ্চতা নির্ধারণ করতে চাই, 500px এর জন্য বলি, যেমন যদি টেবিলের উচ্চতা এর চেয়ে বড় হয় তবে একটি উল্লম্ব স্ক্রোল বার উপস্থিত হবে। আমি সিএসএস heightঅ্যাট্রিবিউটটি ব্যবহার করার চেষ্টা করেছি table, তবে এটি কার্যকর হয় না।

Comments

পরে যেমনটি টেবিলের উচ্চতা হতে বাধ্য করবে max-heightঠিক heightতেমনটির পরিবর্তে ব্যবহার করুন500px

— ফ্রেড

স্ক্রোলিং থেকে শিরোনাম সারি রাখার বিষয়ে আপনি দ্বিতীয় প্রশ্ন জিজ্ঞাসা করতে পারেন। ;)

— বিল

এছাড়াও দেখুন স্ট্যাকওভারফ্লো.com

— অ্যালেক্স নোলাস্কো

Answer 1

overflowসিএসএস সম্পত্তি ব্যবহার করার চেষ্টা করুন । কেবল অনুভূমিক ওভারফ্লো ( overflow-x) এবং উল্লম্ব ওভারফ্লো ( overflow-y) এর আচরণ নির্ধারণ করতে পৃথক বৈশিষ্ট্য রয়েছে ।

যেহেতু আপনি কেবল উল্লম্ব স্ক্রোলটি চান তাই এটি চেষ্টা করুন:

table {
  height: 500px;
  overflow-y: scroll;
}

---

সম্পাদনা করুন:

স্পষ্টতই <table>উপাদানগুলি overflowসম্পত্তিটিকে সম্মান করে না । এটি প্রদর্শিত হচ্ছে কারণ ডিফল্ট <table>হিসাবে উপাদানগুলি রেন্ডার করা হয় না display: block(তাদের আসলে নিজস্ব ডিসপ্লে ধরণের রয়েছে)। উপাদানটিকে একটি ব্লক প্রকার হিসাবে overflowসেট করে আপনি সম্পত্তিটিকে কাজ করতে বাধ্য করতে পারেন <table>:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

নোট করুন যে এর ফলে উপাদানটির 100% প্রস্থ থাকবে, সুতরাং আপনি যদি পৃষ্ঠার পুরো অনুভূমিক প্রস্থটি না নিতে চান তবে আপনাকে অবশ্যই উপাদানটির জন্য একটি স্পষ্ট প্রস্থ নির্দিষ্ট করতে হবে।

Comments

এটি যদিও উচ্চতা সীমাবদ্ধ করে না।

— ফ্রেড

না, এটি করে, আপনার কেবল display:blockটেবিলের উপরে এটি একটি div jsfiddle.net/TSGSA/1

— ফ্রেড

@ ফ্রেড: মহান মন একসাথে চিন্তা করে। আপনি মন্তব্য করার সময় আমি আমার উত্তর আপডেট করেছি। :)

— এজেন্টকনড্রাম

এই উত্তরটি আমাকে সত্যিই সহায়তা করেছে, তবে এটি টেবিল ট্যাগটিতে প্রয়োগ করার পরিবর্তে, স্ক্রোল করার সময় শিরোনামকে স্থির থাকতে দেওয়ার জন্য, এটি টিডির সাথে করা উচিত। তারপরে থ্যাডের যে অঞ্চলটি স্ক্রোল বারের ওপরের দিকে রয়েছে সে সম্পর্কিত ক্ষেত্র অনুসারে কিছু স্টাইলিং রয়েছে।

— ডেভিড

আপনি যদি এটি টিবিতে ব্যবহার করতে যাচ্ছেন তবে নিশ্চিত করুন যে আপনি প্রদর্শনটি যুক্ত করেছেন: থিয়েডে ব্লক করুন (এবং সম্ভবত টিফুট) বা তারা কিছুটা ক্রেজিও হতে পারে। সমস্যাটি দেখে মনে হচ্ছে, একবার আপনি এটি করার পরে, থ্যাড এবং টিডিটির মধ্যে থাকা লিঙ্কটি ভেঙে দিয়েছেন: পূর্ববর্তী কলামগুলি পরবর্তী প্রস্থ সম্পর্কে অবগত নয়। সুতরাং আপনি যে প্যাচ এবং নীচে পিচ্ছিল opeালে আপনি যান। "আমি সৌন্দর্যের জন্য মারা গিয়েছিলাম ..."

— Cuse70

Answer 2

আপনাকে অন্য উপাদানের ভিতরে টেবিলটি আবৃত করতে হবে এবং সেই উপাদানটির উচ্চতা নির্ধারণ করতে হবে। ইনলাইন সিএসএস সহ উদাহরণ:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

Comments

এটি টডি স্ক্রোল করার সময় থ্যাডটিকে জায়গায় রাখার অনুমতি দেয় না।

— ডেভিড

এই প্রয়োজনীয়তা মূল প্রশ্নে নয়।

— ডার্ক ফ্যালকন

এছাড়াও, অন্যান্য (স্বীকৃত) উত্তর থিয়েডকে কোনও জায়গায় রাখে না।

— ব্রুক অ্যাডামস 21

আপনি এখনও এই পদ্ধতিতে জায়গায় শিরোনাম হিসাবে উপস্থিত করতে পারেন। আপনি টেবিলের শিরোনামটি আড়াল করে রাখুন, তারপরে প্রথম টেবিলের উপরে একটি দ্বিতীয় টেবিল তৈরি করুন যাতে এতে শিরোলেখ রয়েছে। তারপরে, উভয় টেবিলকে display:table;তাদের সারি রাখতে display:table-row;এবং তাদের কোষগুলি রাখতে স্টাইল করুন display:table-cell;এবং দুটি টেবিল মিলবে এবং এক হিসাবে উপস্থিত হবে। (উল্লেখ্য: এই কাজ খুব বড় টেবিল সঙ্গে আছে; মূলত, এটা তাদের সাথে মিলে যায় যখন এটি আমি এই কৌশল একাধিক বার ব্যবহার করেছি পারবেন না।।)

— levininja

অবশ্যই। আপেক্ষিক মাপ ব্যবহার করতে পিতামাতার আকার অবশ্যই নির্দিষ্ট করতে হবে। উদাহরণস্বরূপ: jsfiddle.net/hz8wy

— ডার্ক ফ্যালকন

Answer 3

টেবিলের উচ্চতা নির্ধারণ করতে, আপনাকে প্রথমে CSS বৈশিষ্ট্য "প্রদর্শন: ব্লক" সেট করতে হবে তারপরে আপনি "প্রস্থ / উচ্চতা" বৈশিষ্ট্য যুক্ত করতে পারেন। আমি এই মজিলা নিবন্ধটি টেবিলগুলি স্টাইল করতে শেখার জন্য খুব ভাল একটি উত্স পেয়েছি: লিঙ্ক