আমি কীভাবে কোনও টেবিলের বডি স্ক্রল করতে পারি তবে তার মাথাটি স্থির রাখতে পারি?

148

আমি একটি পৃষ্ঠা লিখছি যেখানে আমার একটি সেট আকার বজায় রাখতে একটি HTML টেবিলের প্রয়োজন। আমাকে সর্বদা সেখানে থাকতে টেবিলের শীর্ষে শিরোনামগুলি প্রয়োজন তবে টেবিলটিতে কতগুলি সারি যুক্ত করা হোক না কেন স্ক্রোল করার জন্য আমার টেবিলের বডিও প্রয়োজন। এক্সেলের একটি মিনি সংস্করণ চিন্তা করুন। এটি একটি সাধারণ টাস্কের মতো বলে মনে হচ্ছে তবে ওয়েবে আমি যে প্রায় সমাধান পেয়েছি তার কিছুটা কমতি রয়েছে। আমি কীভাবে এটি সমাধান করতে পারি?

javascript  html  css  html-table 
— পুদিনার মত
সূত্র
2
সেখানে উদাহরণ প্রচুর আছে। এই তাদের মধ্যে একটি ।
— ড্যারেন কোপ
আমি আইই 6, আই 7, এফ এফ, ... তবে বিশেষত আই দুর্ভাগ্যবশত লক্ষ্য করতে হবে
— মিন্টি
সেখানে প্রচুর সিএসএস হ্যাক রয়েছে। আই 7 এ কাজ করার জন্য এটি তুচ্ছ হওয়া উচিত।
— জিম
4
আমি সমস্ত ব্রাউজারের জন্য উত্তর আগ্রহী!
— পুদিনা
15
"আই 7-তে কাজ করা তুচ্ছ হওয়া উচিত" " জিম, তুমি? আপনি কি আমার প্রকল্প পরিচালক? :)
— অ্যারনিয়াস

উত্তর:

53

আমি একই উত্তর খুঁজে পেতে হয়েছিল। আমি যে সর্বোত্তম উদাহরণটি পেয়েছি তা হ'ল http://www.cssplay.co.uk/menu/tablescrol.html - আমি উদাহরণটি পেয়েছি 2 আমার পক্ষে ভাল কাজ করেছে। আপনাকে জাভা স্ক্রিপ্টের সাহায্যে অভ্যন্তরীণ টেবিলের উচ্চতা নির্ধারণ করতে হবে, বাকিটি CSS।

— কেন পেন
সূত্র
3
দুর্ভাগ্যক্রমে, যখন আপনার প্রশস্ত টেবিল (অনুভূমিক স্ক্রোল) থাকবে তখন এই পদ্ধতিটি ব্যর্থ হয়। আপনার কাছে দুটি অনুভূমিক স্ক্রোলবার থাকবে; একটি শিরোনামের জন্য এবং একটি ডেটার জন্য।
— ভোলআরন
4
আপনি <t> প্রস্থ <thead> এর ভিতরে নির্দিষ্ট না করে থাকলে আপনার সমাধান কাজ করে না
— আলেকজান্দ্রু
2
(তুলনামূলকভাবে) নতুন স্ট্যাক ওভারফ্লো স্ট্যান্ডার্ডগুলি মেনে চলার জন্য, আপনি এই উত্তরটি লিঙ্ক থেকে প্রাসঙ্গিক বিট অন্তর্ভুক্ত করতে সম্পাদনা করতে পারেন?
— তহবিল মনিকার লসুইট
উত্স কোথায়, বিলি?
— ক্যান্ডেলজ্যাক
জাভাস্ক্রিপ্ট বা প্রাক-সংজ্ঞায়িত মানগুলিকে অবলম্বন না করে শিরোনাম এবং (স্ক্রোলযোগ্য) টেবিলের বডিগুলির মধ্যে কলামের প্রস্থকে সিঙ্ক্রোনাইজ করা অসম্ভব।
— rustyx
34

আমি ডেটা টেবিলগুলি বেশ নমনীয় বলে খুঁজে পেয়েছি । এর ডিফল্ট সংস্করণটি jquery এর উপর ভিত্তি করে, একটি AngularJs প্লাগইনও রয়েছে ।

— ভিটালীই ফেদোরেনকো
সূত্র
খুব চটুল - বেশিরভাগ কার্যকারিতা আমার এস 3, অ্যান্ড্রয়েড 4.0.4 এ কাজ করে তবে সন্ধান / ফিল্টার নয়
— জেনস ফ্রেন্ডসেন
12

সান হ্যাডির অনুরূপ প্রশ্নের দুর্দান্ত সমাধান আমি দেখেছি এবং কিছু সম্পাদনা করার স্বাধীনতা নিয়েছি :

  • আইডির পরিবর্তে ক্লাস ব্যবহার করুন, তাই এক পৃষ্ঠায় একাধিক টেবিলের জন্য একটি jQuery স্ক্রিপ্ট পুনরায় ব্যবহার করা যেতে পারে
  • ক্যাপশন, থ্যাড, টুফুট এবং টিবি এর মত অর্থপূর্ণ HTML টেবিল উপাদানগুলির জন্য সমর্থন যুক্ত করা হয়েছে
  • Scচ্ছিকভাবে স্ক্রোলবার তৈরি করা হয়েছে যাতে এটি টেবিলগুলির জন্য উপস্থিত হবে না যা স্ক্রোলযোগ্য উচ্চতার চেয়ে "খাটো"
  • টেবিলের ডান প্রান্তে স্ক্রোলবারটি আনতে স্ক্রোলিং ডিভের প্রস্থ সামঞ্জস্য করা
  • দ্বারা ধারণা অ্যাক্সেসযোগ্য তৈরি
    • ইনজেকশন স্ট্যাটিক টেবিল শিরোনামে আরিয়া-লুকানো = "সত্য" ব্যবহার করা
    • এবং আসল থিয়েডটি জায়গায় রেখে, কেবল jQuery এবং সেট দিয়ে লুকানো aria-hidden="false"
  • বিভিন্ন আকারের একাধিক সারণীর উদাহরণ দেখানো হয়েছে

শন ভারী উত্তোলন করেছে, যদিও। ম্যাট বার্ল্যান্ডকেও ধন্যবাদ, tfoot সমর্থন করার প্রয়োজন দেখানোর জন্য।

Http://jsfiddle.net/jhfunch/eNP2N/ এ নিজের জন্য দয়া করে দেখুন

— জেরোমি ফ্রেঞ্চ
সূত্র
ভাল, তবে আপনি যদি শিরোনাম এবং পাদচরণ চান তবে এটি স্ক্রু আপ !
— ম্যাট বারল্যান্ড
3
ধন্যবাদ ম্যাট, আমি সামঞ্জস্য করেছি।
— জেরোমী ফরাসি
আপনি যদি টিডি এবং তম সীমান্ত দেখান তবে প্রান্তিককরণের জন্য টুইট করা দরকার।
— ধোচি
8

আপনি কি থ্যাড এবং টডি ব্যবহার করার চেষ্টা করেছেন এবং ওভারফ্লো: বায়ু দিয়ে টবিকে একটি নির্দিষ্ট উচ্চতা নির্ধারণ করেছেন?

আপনার লক্ষ্য ব্রাউজারগুলি কি?

সম্পাদনা: এটি ফায়ারফক্সে (প্রায়) ভালভাবে কাজ করেছে - উল্লম্ব স্ক্রোলবার সংযোজনের ফলে অনুভূমিক স্ক্রোলবারের প্রয়োজনও ছিল - ইয়াক। IE কেবলমাত্র টিডিটির উচ্চতা নির্ধারণ করেছিলাম যেটি করার জন্য আমি যে উচ্চতার উচ্চতা নির্দিষ্ট করেছিলাম to আমি এখানে সেরা আসতে পারি:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— ক্রিস মারাস্তি-জর্জ
সূত্র
1
আমি আইই 6, আই 7, এফ এফ, ... তবে বিশেষত আই দুর্ভাগ্যবশত
— মিন্টি
টেবিলটি পরিবর্তন করুন যাতে এটি প্রস্থের 100% এর চেয়ে কম হয়, 99% বলুন এবং এটি সমস্যার যত্ন নেওয়া উচিত
— ওল্ফম্যানড্রাগন
2
overflow-x: hidden;এবং overflow-y: autoসাহায্য।
— justkt
7
এটি ফায়ারফক্সে কাজ করত এবং এটি সুস্পষ্ট এবং নন-ক্লডজি কোড। তবে ফায়ারফক্সের আরও সাম্প্রতিক সংস্করণগুলিতে এটি ভেঙে গেছে।
— রাসমুস কাজ
6
এটি কাজ করে না কারণ "ওভারফ্লো" কেবল "ব্লক পাত্রে" ( w3.org/TR/CSS21/visufx.html# ওভারফ্লো ) জন্য প্রযোজ্য , এবং টেবিল বাক্সগুলি "ব্লক পাত্রে" নয় ( w3.org/TR/CSS21/ visuren.html # ব্লক-বাক্স )।
— মহিষ্মিত
8

আপনার যা প্রয়োজন তা হ'ল:

1) সীমাবদ্ধ উচ্চতার একটি টেবিল বডি রয়েছে কারণ স্ক্রোলিং উইন্ডোর চেয়ে সামগ্রীগুলি কেবল তখন বড় হয়। তবে tbodyআকার দেওয়া যাবে না এবং এটি করার জন্য আপনাকে এটি প্রদর্শন blockকরতে হবে:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) সারণী শিরোনাম এবং টেবিলের বডি কলামগুলির প্রস্থটিকে পুনরায় সিঙ্ক করুন কারণ blockএটিকে একটি সম্পর্কযুক্ত উপাদান হিসাবে তৈরি করেছে। এটি করার একমাত্র উপায় হ'ল উভয় ক্ষেত্রে একই কলামের প্রস্থ প্রয়োগ করে সিঙ্ক্রোনাইজেশন অনুকরণ করা ।

তবে, যেহেতু tbodyনিজেই blockএখন একজন, তাই এটি আর কোনওটির মতো আচরণ করতে পারে না table। যেহেতু আপনাকে tableকলামগুলি সঠিকভাবে প্রদর্শন করতে আপনার এখনও আচরণ প্রয়োজন , তাই সমাধানটি হ'ল আপনার প্রতিটি সারি স্বতন্ত্র হিসাবে প্রদর্শিত হবে table:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(দ্রষ্টব্য, এই কৌশলটি ব্যবহার করে, আপনি আর সারি জুড়ে বিস্তৃত করতে পারবেন না)।

এটি হয়ে গেলে, আপনি উভয় theadএবং একই প্রস্থের কলাম প্রস্থগুলি প্রয়োগ করতে পারেন tbody। আপনি এটি করতে পারেন নি:

  • প্রতিটি কলামের জন্য পৃথকভাবে (নির্দিষ্ট সিএসএস ক্লাস বা ইনলাইন স্টাইলিংয়ের মাধ্যমে) যা প্রতিটি টেবিলের উদাহরণ হিসাবে করা বেশ ক্লান্তিকর;
  • সমস্ত কলামের জন্য অভিন্নভাবে ( th, td { width: 20%; }যদি আপনার কাছে 5 টি কলাম থাকে উদাহরণস্বরূপ) যা আরও ব্যবহারিক (প্রতিটি টেবিলের জন্য প্রস্থ নির্ধারণ করার প্রয়োজন নেই) তবে কোনও কলামের গণনার জন্য কাজ করতে পারে না
  • স্থির টেবিল বিন্যাসের মাধ্যমে যে কোনও কলামের গণনার জন্য সমান।

আমি শেষ বিকল্পটি পছন্দ করি, যার জন্য যুক্ত করা দরকার:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

এই প্রশ্নের উত্তর থেকে কাঁটাচামচ করা এখানে একটি ডেমো দেখুন ।

— Javarome
সূত্র
ব্যাখ্যার জন্য ধন্যবাদ. এটি কতটা উপায়ে করা যায় তা উপভোগ করছে এবং বেশিরভাগ উত্তর কেবল কিছু কোড এবং প্লঙ্কার লিঙ্ক উপস্থাপন করে যা আপনাকে এটি নিজের জন্য নির্ধারণ করতে দেয়।
— পল রুনি
4

সম্পাদনা করুন:   এটি একটি পুরানো উত্তর এবং সমৃদ্ধির জন্য এখানে কেবল এটি দেখানোর জন্য যে এটি 2000 এর দশকে একবার সমর্থিত হয়েছিল তবে বাদ পড়েছিল কারণ 2010 এর দশকে ব্রাউজারের কৌশলটি ডাব্লু 3 সি স্পেসিফিকেশনকে সম্মান জানানো হয়েছিল এমনকি কিছু বৈশিষ্ট্য অপসারণ করা হয়েছে: স্থির শিরোনাম সহ স্ক্রোলযোগ্য টেবিল / পাদচরণ HTML5 এর আগে আড়ম্বরপূর্ণভাবে নির্দিষ্ট করা হয়েছিল।

খারাপ সংবাদ

দুর্ভাগ্যক্রমে স্থির thead/ সহ এইচটিএমএল / সিএসএসের স্পেসিফিকেশন খুব স্পষ্ট নয়tfoot বলে স্ক্রোলযোগ্য টেবিল হ্যান্ডেল করার কোনও মার্জিত উপায় নেই ।

ব্যাখ্যা

যদিও এইচটিএমএল 4.01 স্পেসিফিকেশন বলছেন thead/ tfoot/ tbodyস্ক্রোল টেবিল শরীর ব্যবহৃত হয় (চালু?):

THEAD, TFOOT এবং TBODY উপাদানগুলি ব্যবহার করে সারণি সারিগুলি [...] বিভাগযুক্ত করা যেতে পারে [...]। এই বিভাগটি ব্যবহারকারীর এজেন্টগুলিকে টেবিলের মাথা এবং পায়ের স্বতন্ত্রভাবে টেবিল সংস্থাগুলির স্ক্রোলিং সমর্থন করতে সক্ষম করে।

তবে এফএফ 3.6 এ কর্মক্ষম স্ক্রোলযোগ্য টেবিল বৈশিষ্ট্যটি এফএফ 3.7 এ সরিয়ে ফেলা হয়েছে কারণ এটি একটি বাগ হিসাবে বিবেচনা করা হয় কারণ এইচটিএমএল / সিএসএসের নির্দিষ্টকরণের সাথে সম্মতিযুক্ত নয়। দেখুন এই এবং যে মুক্তিযোদ্ধা বাগ মন্তব্য।

মজিলা বিকাশকারী নেটওয়ার্ক টিপ

স্ক্রোলযোগ্য টেবিলের জন্য MDN দরকারী টিপসের একটি সরলীকৃত সংস্করণ নীচে
এই সংরক্ষণাগার পৃষ্ঠা বা বর্তমান ফরাসি সংস্করণ দেখুন

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

তবে এমডিএন আরও বলেছে যে এটি এফএফ-তে আর কাজ করে না :-(
আমি আইই 8 তেও পরীক্ষা করেছি => টেবিলটিও স্ক্রোলযোগ্য নয়: - (((

— olibre
সূত্র
স্ক্রোলযোগ্য টেবিল লিঙ্কের জন্য MDN টিপস সীমান্ত-পতন সম্পর্কে যে প্রাসঙ্গিক তথ্য বলে তা প্রাসঙ্গিক নয়। 5 বছর কেটে গেছে কারণ পৃষ্ঠার পরিবর্তন হতে পারে
— partizanos
ধন্যবাদ @ পারটিজানোস আমি শেষ পর্যন্ত এমডিএন ইতিহাসে মূল উইকি পৃষ্ঠাটি পেয়েছি! আমার পুরানো উত্তরটি এখন অপ্রচলিত মনে হলেও সমৃদ্ধির জন্য বিকাশকারীদের পরবর্তী প্রজন্ম জানবে 2000 এর দশকে ফিরে বাস্তবায়ন করা সম্ভব এবং সহজ ছিল ;-) চিয়ার্স
— অলিবার
3

কেউ এখনও এটি দেখছেন কিনা তা নিশ্চিত নন তবে তারা যেভাবে আগে এটি করেছি তা হ'ল একক আসল টেবিলটি প্রদর্শন করতে দুটি টেবিল ব্যবহার করা হবে - প্রথমটি কেবলমাত্র মূল টেবিল শিরোনাম লাইন এবং কোনও টেবিলে বডি সারি নেই (বা খালি দেহের সারি তৈরি করতে হবে) এটি বৈধতা)।

দ্বিতীয়টি একটি পৃথক ডিভিতে রয়েছে এবং এর কোনও শিরোনাম নেই এবং কেবল মূল টেবিলের বডি সারি রয়েছে। পৃথক ডিভ তারপর স্ক্রোলযোগ্য করা হয়।

এর ডিভের দ্বিতীয় সারণীটি এইচটিএমএলে প্রথম টেবিলের ঠিক নীচে স্থাপন করা হয়েছে এবং এটি একটি নির্দিষ্ট শিরোনাম এবং একটি স্ক্রোলযোগ্য নিম্ন বিভাগ সহ একক টেবিলের মতো দেখায়। আমি এটি কেবল সাফারি, ফায়ারফক্স এবং আইইতে পরীক্ষা করেছি (স্প্রিং ২০১০-এর প্রতিটিগুলির সর্বশেষ সংস্করণ) তবে এটি তাদের সকলের মধ্যেই কাজ করেছে।

এটি কেবলমাত্র সমস্যাটি ছিল যে প্রথম টেবিলটি কোনও দেহ ছাড়াই বৈধ হবে না (W3.org যাচাইকারী - এক্সএইচটিএমএল 1.0 কঠোর), এবং যখন আমি কোনও বিষয়বস্তু না দিয়ে একটি ফাঁকা সারি তৈরি করি। এটি দৃশ্যমান না করার জন্য আপনি সিএসএস ব্যবহার করতে পারেন তবে এটি পৃষ্ঠায় স্থান খায়।

— মিক
সূত্র
অতিরিক্ত সারিটি কীভাবে এখনও স্থান গ্রহণ করবে? আপনি যদি ব্যবহার করেন display: none;তবে এটি কোনও পর্দার স্থান গ্রহণ করতে হবে না , যদি না আপনি উত্সটিতে স্থান বলতে চান না ..?
— ক্লারকিবয়
3

এই সমাধানটি ক্রোম 35, ফায়ারফক্স 30 এবং আইই 11-তে কাজ করে (অন্যান্য সংস্করণ পরীক্ষিত নয়)

এর খাঁটি সিএসএস: http://jsfiddle.net/ffabreti/d4sope1u/

সবকিছু প্রদর্শনের জন্য সেট করা আছে: ব্লক, টেবিলটির একটি উচ্চতা প্রয়োজন:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— ফার্নান্দো ফাব্রেতি
সূত্র
2

এটি আমার একটি প্রয়োগের জন্য এমন গ্রিড বাস্তবায়নের চেষ্টা করার কারণে আমার প্রচণ্ড মাথাব্যাথা ঘটায়। আমি সেখানে সমস্ত বিভিন্ন কৌশল চেষ্টা করেছিলাম কিন্তু তাদের প্রত্যেকেরই সমস্যা ছিল। আমি যে নিকটে এসেছি তা হল ফ্লেক্সিগ্রিডের মতো একটি jQuery প্লাগইন ব্যবহার করা ( http://www.ajaxrain.com এ দেখুন ) বিকল্পগুলির জন্য ) তবে এটি আমার প্রয়োজন এমন 100% প্রশস্ত টেবিলকে সমর্থন করে না বলে মনে হয়।

আমি যা করতে পেরেছি তা আমার নিজের ঘূর্ণায়মান ছিল; ফায়ারফক্স স্ক্রোলিং tbodyউপাদানগুলিকে সমর্থন করে তাই আমি ব্রাউজারটি শুকিয়েছি এবং যথাযথ সিএসএস ব্যবহার করেছি (উচ্চতা নির্ধারণ, ওভারফ্লো ইত্যাদি ইত্যাদি more আপনি আরও বিশদ চান কিনা তা জিজ্ঞাসা করুন) এবং অন্য ব্রাউজারগুলির জন্য আমি দুটি পৃথক টেবিল ব্যবহার করেছি table-layout: fixedযা একটি সাইজিং ব্যবহার করে অ্যালগরিদম যা উল্লিখিত আকারের ওভারফ্লো না করার গ্যারান্টিযুক্ত হয় (যখন সামগ্রীগুলি খুব বেশি প্রশস্ত হয় তখন সাধারণ টেবিলগুলি প্রসারিত হবে)। উভয় টেবিলকে অভিন্ন প্রস্থ দিয়ে আমি তাদের কলামগুলি লাইন পেতে সক্ষম হয়েছি। আমি দ্বিতীয়টি স্ক্রোল করতে একটি ডি সেটে মুড়ে ফেলেছিলাম এবং কিছুটা জিগারি পোকারি দিয়ে মার্জিন ইত্যাদি দিয়ে চেহারাটি দেখতে পেয়েছিলাম এবং অনুভব করতে চাইছিলাম।

দুঃখিত যদি এই উত্তরটি জায়গায় কিছুটা অস্পষ্ট মনে হয়; আমার খুব বেশি সময় নেই বলে দ্রুত লিখছি। আপনি যদি আমাকে আরও প্রসারিত করতে চান তবে একটি মন্তব্য করুন!

— লুক বনেট
সূত্র
এই পুরানো থ্রেডটি পুনরুত্থিত করার জন্য দুঃখিত, তবে আপনি কীভাবে এটি কাজ করেছেন তা আমার সত্যই জানতে হবে। আমি এফএফ কাজ করেছিলাম তবে আইই / ওয়েবকিট ব্রাউজারগুলি নেই। আপনি যখন পারেন দয়া করে সহায়তা করুন।
— আলফেরো চিংগো
2

এখানে একটি কোড যা সত্যই IE এবং FF এর জন্য কাজ করে (কমপক্ষে):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

আমি মূল কোডটি এটিকে আরও স্পষ্ট করে তুলতে এবং এটি এবং এফএফ-তেও সূক্ষ্মভাবে কাজ করার জন্য পরিবর্তন করেছি

আসল কোড এখানে

— ড্যানিয়েল কস্তা
সূত্র
1
আই 7/8 এ এটি কেবল কুইর্কস মোডে কাজ করে এবং আপনি কোনও ডক্টাইপ যুক্ত করার সাথে সাথে এটি কাজ করা বন্ধ করে দেয়, অর্থাত<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— সিসিপিজ্জা
1

এখানে আমার বিকল্প। এটি শিরোনাম, দেহ এবং পাদচরণের জন্য বিভিন্ন ডিআইভি ব্যবহার করে তবে উইন্ডো পুনরায় আকার দেওয়ার জন্য এবং অনুসন্ধান, স্ক্রোলিং, বাছাই, ফিল্টারিং এবং অবস্থানের জন্য সিঙ্ক্রোনাইজ করা হয়:

আমার সিডি তালিকা

টেবিলগুলি দেখতে জাজ, ক্লাসিকাল ... বোতামে ক্লিক করুন। এটি সেট আপ করা হয়েছে যাতে জাভাস্ক্রিপ্ট বন্ধ থাকলেও এটি পর্যাপ্ত।

আইই, এফএফ এবং ওয়েবকিট (ক্রোম, সাফারি) এ ঠিক আছে বলে মনে হচ্ছে।

— goneill
সূত্র
1

দুঃখিত আমি আপনার প্রশ্নের সব উত্তর পড়তে না।

হ্যাঁ আপনি এখানে যা চান তা এখানে (আমি ইতিমধ্যে সম্পন্ন করেছি)

একই ধরণের স্টাইলিংয়ের জন্য একই শ্রেণীর নাম সহ আপনি দুটি টেবিল ব্যবহার করতে পারেন, কেবল একটি টেবিলের মাথা সহ এবং অন্যটি আপনার সারি সহ। এখন এই টেবিলটি একটি ডিভের ভিতরে রাখুন ওভারফ্লো-ওয়াই: অটো ও স্ক্রোল সহ উচ্চতা স্থির।

— Sanuj
সূত্র
1

উপরের পরামর্শগুলির সাথে আমার যে প্রধান সমস্যাটি ছিল তা হ'ল টেবিলসোর্টার.জেজে প্লাগ ইন করতে সক্ষম হওয়া এবং নির্দিষ্ট সর্বাধিক আকারের সীমাবদ্ধ সারণীর জন্য শিরোনামগুলি ভাসতে সক্ষম হওয়া। শেষ পর্যন্ত আমি jQuery.floatThead প্লাগইন জুড়ে হোঁচট খেয়েছি যা ভাসমান শিরোনাম সরবরাহ করে এবং বাছাইয়ের কাজ চালিয়ে যাওয়ার অনুমতি দেয়।

এটিতে একটি তুলনা পৃষ্ঠাও রয়েছে যা বনাম অনুরূপ প্লাগইনগুলি দেখায় ।

— গাই হলিংটন
সূত্র
1

লাইভ জেএসফিডাল

এটি কেবলমাত্র এইচটিএমএল এবং সিএসএস দিয়েই সম্ভব

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
স্নিপেট প্রসারিত করুন

— মোঃ রফি
সূত্র
0

যদি এখানে জাভাস্ক্রিপ্টটি ব্যবহার করা ঠিক আছে তবে আমার সমাধানটি হ'ল সমস্ত কলামগুলিতে একটি টেবিল সেট নির্দিষ্ট প্রস্থ তৈরি করুন (পিক্সেল!) টেবিলটিতে স্ক্রোলিফ শ্রেণীটি যুক্ত করুন এবং এই জাভাস্ক্রিপ্ট + jquery 1.4.x সিএসএস বা শৈলীতে উচ্চতা সেট করুন!

পরীক্ষিত: অপেরা, ক্রোম, সাফারি, এফএফ, আই 5.5 ( এপিক স্ক্রিপ্ট ব্যর্থ ), আই 6, আই 7, আই 8, আই 9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

সম্পাদনা: স্থির উচ্চতা।

— পিটার
সূত্র
0

আমি জাভাস্ক্রিপ্ট (লাইব্রেরি নেই) এবং সিএসএস দিয়ে এটি করি - পৃষ্ঠার সাথে টেবিলের বডি স্ক্রলগুলি রয়েছে এবং টেবিলটি নির্দিষ্ট প্রস্থ বা উচ্চতা নির্ধারণ করতে হবে না, যদিও প্রতিটি কলামের প্রস্থ থাকতে হবে। আপনি বাছাই কার্যকারিতাও রাখতে পারেন।

মূলত:

  1. এইচটিএমএলে, টেবিল শিরোনাম সারি এবং টেবিলের বডি স্থাপনের জন্য ধারক ডিভিড তৈরি করুন, টেবিলের শিরোনামটি শিরোনামের পাশ দিয়ে স্ক্রোল করার সাথে সাথে একটি "মুখোশ" বিভাজন তৈরি করুন

  2. সিএসএসে, টেবিলের অংশগুলি ব্লকে রূপান্তর করুন

  3. জাভাস্ক্রিপ্টে, টেবিলের প্রস্থ পান এবং মাস্কের প্রস্থের সাথে মেলে ... পৃষ্ঠাগুলির সামগ্রীর উচ্চতা পান ... স্ক্রোল অবস্থানটি পরিমাপ করুন ... টেবিল শিরোনাম সারি অবস্থান এবং মাস্কের উচ্চতা সেট করতে সিএসএস ম্যানিপুলেট করুন

এখানে জাভাস্ক্রিপ্ট এবং একটি জেএসফিডাল ডেমো রয়েছে।

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— ডেবোরা
সূত্র
তবে আপনার ডেমোতে সারণী শিরোনামটি রাখা হয় না, এটি কেবল স্ক্রোল করে। (ক্রোম এখানে।)
— জেড।
আমি এটি ক্রোমে দেখছি না। আপনি কি নিশ্চিত যে আপনি শিরোনামের জন্য লাল নির্দেশাবলীতে হলুদ হাইলাইটেড কক্ষগুলি ভুল করছেন না? শিরোনামের ঘরগুলি শীর্ষে রয়েছে এবং ধূসরতে ধূসর ("কল্যান 1", "কল 2" ইত্যাদি)।
— দেবোরাহ
0

আমার জন্য, টেবিল সিএসএস থেকে প্রস্থ সরিয়ে না দেওয়া পর্যন্ত স্ক্রোলিং সম্পর্কিত কোনও কিছুই সত্যিই কাজ করে না। মূলত, টেবিল সিএসএস এর মত দেখাচ্ছে:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

যত তাড়াতাড়ি আমি প্রস্থ সরানো: 100%; সমস্ত স্ক্রোলিং বৈশিষ্ট্য কাজ শুরু করে।

— ম্যাথু পার্ক
সূত্র
0

যদি আপনার পর্যাপ্ত মান থাকে;) আপনি কেবল একটি শিরোনামের উপরে সরাসরি একটি শিরোনামযুক্ত একটি টেবিল রাখতে পারেন। এটি অনুভূমিকভাবে স্ক্রোল করবে না, তবে আপনার যদি এটির প্রয়োজন না হয় ...

— M610
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.