এইচটিএমএল টেবিলে অনুভূমিক স্ক্রোলবার যুক্ত করুন

Question

এইচটিএমএল টেবিলে একটি অনুভূমিক স্ক্রোলবার যুক্ত করার কোনও উপায় আছে কি? টেবিলটি কীভাবে বৃদ্ধি পায় তার উপর নির্ভর করে আমার আসলে এটি উল্লম্ব এবং অনুভূমিকভাবে উভয়ভাবেই স্ক্রোলযোগ্য হওয়া দরকার তবে আমি স্ক্রোলবারটি উপস্থিত হতে পারি না।

Comments

... পুরো টেবিলটি ডিভের মধ্যে রাখার কথা ভেবেছি? ... তাহলে ডিভ এ স্ক্রোল যুক্ত করবেন?

— ভেক্টর

হতে পারে সময়টি কোন উত্তরটি গ্রহণযোগ্য উত্তর হতে হবে?

— সার্জ Stroobandt

Answer 1

আপনি কি সিএসএস overflowসম্পত্তি চেষ্টা করেছিলেন ?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

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

Comments

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

— bloudermilk

@ ব্লাউডারমিল্ক আপনি যুক্ত করতে পারলে আপনি পারেন display: block।

— সিস টিমারম্যান

Answer 2

প্রথমে display: blockআপনার টেবিলের একটি তৈরি করুন

তারপর, সেট overflow-x:করতে auto।

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

সুন্দর এবং পরিষ্কার। অতিরিক্ত অতিরিক্ত বিন্যাস নেই।

এখানে আমার ওয়েবসাইটের একটি পৃষ্ঠা থেকে টেবিলের ক্যাপশন স্ক্রোল সহ আরও জড়িত উদাহরণ রয়েছে ।

Comments

এটি ক্রোমে আমার পক্ষে কাজ করে তবে সমস্ত কিছু একসাথে স্কোয়াশ করার পরে। white-space: nowrap;তাত্ক্ষণিকভাবে স্ক্রোলবারটি দেখতে সহায়তা করে।

— সিস টিমারম্যান

আমি আসলে এটি আগে চেষ্টা করেছি। কেবলমাত্র সমস্যাটি হ'ল টেবিলের ঘরগুলি আর টেবিলের পুরো প্রস্থ পূরণ করে না।

— শেভি

যেমন অন্যদের দ্বারা বলা হয়েছে এটি সঠিকভাবে কাজ করে না: সারণি সারিগুলি সারণির প্রস্থ পূরণ করে না।

— কলিমার্কো

@ সার্জস্ট্রোব্যান্ড না, আমার ক্ষেত্রে white-space: nowrap;সমস্যাটি সমাধান হয় না (ফায়ারফক্সে পরীক্ষিত)। সারিগুলি প্রসারিত করার জন্য পর্যাপ্ত সামগ্রী (পাঠ্য) না থাকলে সারিগুলির প্রস্থ সারণির প্রস্থের চেয়ে কম হয়।

— কলিমার্কো

@ কলিমার্কো নোট আমাকে সর্বাধিক প্রস্থ: ইনলাইন-ব্লক বিকল্পের জন্য 100% ব্যবহার করতে হয়েছিল।

— dogoncouch

Answer 3

একটি ডিআইভিতে টেবিলটি মুড়ে নিন, নিম্নলিখিত শৈলীর সাথে সেট করুন:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

Comments

মনে হয় overflow:autoএখানে অপ্রয়োজনীয়। প্রস্থ নির্ধারণ না করেই আপনি এটি অর্জনের জন্য কীভাবে জানেন ... এটি সবসময় এইচটিএমএলে সমাধান বলে মনে হয় - হার্ডকোড কিছু প্রস্থ বা উচ্চতা তবে এটি একটি লেআউট ইঞ্জিন থাকার বিন্দুটিকে পরাস্ত করে বলে মনে হচ্ছে!

— JonnyRaa

Answer 4

এর জন্য সিএসএস অ্যাট্রিবিউট " ওভারফ্লো " ব্যবহার করুন।

সংক্ষিপ্ত সারাংশ:

overflow: visible|hidden|scroll|auto|initial|inherit;

যেমন

table {
    display: block;
    overflow: scroll;
}

Comments

প্রদত্ত লিঙ্কটি ভাঙ্গা হয়েছে

— Justingordon

Answer 5

@ সার্জ স্ট্রোব্যা্যান্ড্ট প্রস্তাবিত সমাধানটির সাথে আমার ভাল সাফল্য পেয়েছিল, তবে @ শেভি কোষগুলির সাথে আমার তখন সমস্যার মুখোমুখি হয়েছিল যা টেবিলের পুরো প্রশস্ততা পূরণ না করে। আমি কিছু স্টাইল যুক্ত করে এটি ঠিক করতে সক্ষম হয়েছি tbody।

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

এটি ম্যাকের ফায়ারফক্স, ক্রোম এবং সাফারিতে আমার জন্য কাজ করেছে।

Answer 6

কাজের জন্য উপরের কোনও সমাধান আমি পাইনি। তবে, আমি একটি হ্যাক পেয়েছি:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

Comments

উপরের কোনওটিই আমার পক্ষে কাজ করেনি, তবে এটি করেছে। একটি ভাল, ধন্যবাদ।

— গ্যাব্রিয়েল

@ গ্যাব্রিয়েল আনন্দিত এটি আপনার জন্য কাজ করেছে। আমি আবার ফায়ারফক্স চেষ্টা এইমাত্র এবং এটি সঠিকভাবে রেন্ডারিং করা বলে মনে হচ্ছে না :-( i.imgur.com/BcjSaCV.png ক্রোম এখনও দেখায় ভালো।

— mpen

স্ট্রেঞ্জ; আমি এটি ফায়ারফক্সে হুবহু ব্যবহার করছি এবং এটি সেখানে কাজ করেছে - যদিও এই সঠিক সেটআপে নেই। আমি ধসে পড়া সীমানা এবং সর্বাধিক প্রস্থের প্রস্থ + ওভারফ্লো-এক্স: অটোকে মূল বলে মনে করে 10 x 10 পিক্স ডিভ দিয়ে তৈরি একটি বড় গ্রিড রেন্ডার করতে চেয়েছিলাম। জায়গাগুলির সাথে, সবকিছু নিখুঁত দেখাচ্ছে। এছাড়াও, আমি কোনও টেবিল, টেবিল-সারি এবং টেবিল-ঘরটি প্রদর্শন সহ কেবলমাত্র ডিভগুলি ব্যবহার করছি না only

— গ্যাব্রিয়েল

Answer 7

এটি সার্জ স্ট্রোব্যান্ডের উত্তরের একটি উন্নতি এবং পুরোপুরি কার্যকর। এটিতে কম কলাম থাকলে পুরো পৃষ্ঠার প্রস্থটি পূরণ না করে টেবিলের বিষয়টি সমাধান করে।

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

Comments

The white-space: nowrap;চ্ছিক বলে মনে হচ্ছে।

— মাইক Shiyan

Answer 8

আমি একই ইস্যুতে চলছিলাম। আমি নিম্নলিখিত সমাধানটি আবিষ্কার করেছি, যা কেবলমাত্র Chrome v31 এ পরীক্ষা করা হয়েছে:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

Comments

table-layout: fixedসুন্দর.

— সিস টিমারম্যান

Answer 9

আমি পূর্ববর্তী সমাধানের ভিত্তিতে এই উত্তরটি বের করেছিলাম এবং এটির মন্তব্যে এবং আমার নিজস্ব কিছু অ্যাডজাস্টমেন্ট যুক্ত করেছে। এটি আমার জন্য প্রতিক্রিয়াশীল টেবিলে কাজ করে।

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

Comments

@ সাeedদ আপনারা কি এইচটিএমএল কাঠামোর মতো কিছু বোঝাতে চেয়েছিলেন?

— জর্জ

আমার খারাপ, আমি এর অর্থ আরও ব্যাখ্যা যুক্ত করছি, এটি আরও ভালভাবে বুঝতে সাহায্য করার জন্য

— মাস্তিসা

আশা করি এই সংস্করণটি আরও স্পষ্ট হয়েছে।

— জর্জ

Answer 10

টেবিলে থাকা '100% এরও বেশি প্রস্থ' সত্যই এটি আমার পক্ষে কাজ করে।

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

Answer 11

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

Comments

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

— সিস টিমারম্যান