এইচটিএমএল টেবিলে স্ক্রোল বারটি কীভাবে প্রদর্শিত হবে display

Question 1

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

আমি এই url এ এটি 2 পদ্ধতির মতো দেখতে চাই: http://www.cssplay.co.uk/menu/tablescrol.html

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

tbody {
  height: 80em;
  overflow: scroll;
}

<table border=1 id="qandatbl" align="center">
  <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
  </tr>

  <tbody>
    <tr>
      <td class='qid'></td>
      <td class="options"></td>
      <td class="duration"></td>
    </tr>
  </tbody>
</table>

স্নিপেট প্রসারিত করুন

Question 2

এটার মতো কিছু?

http://jsfiddle.net/TweNm/

ধারণাটি হ'ল <table>স্থায়ীভাবে অবস্থানযুক্ত <div>যাতে একটি overflow:autoসিএসএস সম্পত্তি রয়েছে in তারপরে <thead>একেবারে উপাদানগুলিকে অবস্থান দিন ।

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
          <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
          <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
          <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
          <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
          <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
          <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
          <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
          <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
          <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
          <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
          <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
          <!-- etc... -->
          <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>

স্নিপেট প্রসারিত করুন

Question 3

আপনাকে এটির <table>একটি <div>নির্দিষ্ট আকারের আকারে sertোকাতে হবে এবং <div>শৈলীতে আপনাকে সেট করতে হবে overflow: scroll।

Question 4

গৃহীত উত্তরটি একটি ভাল সূচনা পয়েন্ট সরবরাহ করেছে, তবে আপনি যদি ফ্রেমটির আকার পরিবর্তন করেন, কলামের প্রস্থ পরিবর্তন করেন বা সারণির ডেটা পরিবর্তন করেন তবে শিরোনামগুলি বিভিন্ন উপায়ে বিভ্রান্ত হবে। অন্যান্য প্রতিটি উদাহরণ আমি দেখেছি একই রকম সমস্যা রয়েছে বা টেবিলের বিন্যাসে কিছু গুরুতর বিধিনিষেধ আরোপ করে।

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

এখানে একটি উদাহরণ রয়েছে যা ওপির দ্বারা উল্লিখিত টেবিলটির প্রতিলিপি করতে সমস্ত প্রয়োজনীয় বৈশিষ্ট্য রয়েছে: জেএসফিডাল

রঙ এবং সীমানাগুলি এটিকে রেফারেন্সের মতো করে তুলতে পরিবর্তন করতে হবে। সিএসএস মন্তব্যে এই ধরণের পরিবর্তন কীভাবে করা যায় সে সম্পর্কিত তথ্য সরবরাহ করা হয়।

কোডটি এখানে:

/*the following html and body rule sets are required only if using a % width or height*/
/*html {
width: 100%;
height: 100%;
}*/
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
  text-align: center;
  background: white;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/
  height: 188px/*100%*/; /*set table height here; can be fixed value or %*/
  min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 20px;
  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid black;
  height: 100%;
  padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
  top: 0;
  background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height: 100%;
  overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
  overflow-x: hidden;
  border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width: 100%;
  border-spacing: 0;
  margin-top: -20px; /*inverse of column header height*/
  /*margin-right: 17px;*/ /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position: absolute;
  top: -20px; /*inverse of caption height*/
  margin-top: -1px; /*inverse of border-width*/
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /*match column header height*/
  border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content: "";
  display: block;
  min-height: 20px; /*match column header height*/
  padding-top: 1px;
  border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 100px;
  top: -1px; /*inverse border-width*/
  background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid black;
  top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid black;
  padding: 0 6px 0 6px;
  height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/

<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"></div></th>
            <th><div label="Column 2"></div></th>
            <th><div label="Column 3"></div></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>

<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->

স্নিপেট প্রসারিত করুন

Question 5

আমি আমার কন্টেন্টকে দুটি টেবিলের মধ্যে পৃথক করে এই সমস্যার সমাধান করেছি।

একটি সারণী শিরোনাম সারি।

সেকেন্ডগুলিও <table>ট্যাগ থাকে তবে <div>স্থির উচ্চতা এবং ওভারফ্লো স্ক্রোল দিয়ে মোড়ানো হয় ।

Question 6

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

যদি আপনি এটি চান তবে এটির height: x;সাথে max-height: x;এবং overflow:scrollসাথে প্রতিস্থাপন করুন overflow:auto।

অতিরিক্ত হিসাবে, আপনি ব্যবহার করতে পারেন overflow-xএবং overflow-yআপনি যদি চান এবং স্পষ্টত একই জিনিসটি অনুভূমিকভাবে কাজ করেwidth : x;

Question 7

যদি আপনি সেই জায়গায় পৌঁছে যান যেখানে উল্লিখিত সমস্ত সমাধানগুলি কাজ করে না (যেমন এটি আমার জন্য পেয়েছে), এটি করুন:

দুটি টেবিল তৈরি করুন। একটি শিরোনামের জন্য এবং অন্যটি শরীরের জন্য
দুটি টেবিলকে বিভিন্ন পিতামাতার পাত্রে / ডিভগুলি দিন
এর সামগ্রীর উল্লম্ব স্ক্রোলটিকে মঞ্জুরি দেওয়ার জন্য দ্বিতীয় সারণির ডিভ স্টাইল করুন।

এই মত, আপনার HTML

<div class="table-header-class">
    <table>
       <thead>
          <tr>
            <th>Ava</th>
            <th>Alexis</th>
            <th>Mcclure</th>
          </tr>
       </thead>
    </table>
</div>
<div class="table-content-class">
   <table>
       <tbody>
          <tr>
            <td>I am the boss</td>
            <td>No, da-da is not the boss!</td>
            <td>Alexis, I am the boss, right?</td>
          </tr>
       </tbody>
    </table>
</div>

তারপরে আপনার মধ্যে উল্লম্ব স্ক্রোলটিকে অনুমতি দেওয়ার জন্য দ্বিতীয় সারণির পিতামাতার স্টাইল করুন CSS

    .table-content-class {
        overflow-y: scroll;    // use auto; or scroll; to allow vertical scrolling; 
        overflow-x: hidden;    // disable horizontal scroll 
    }

Question 8

শুধু টেবিলে যোগ করুন

style="overflow-x:auto;"

<table border=1 id="qandatbl" align="center" style="overflow-x:auto;">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

স্নিপেট প্রসারিত করুন

শৈলী = "ওভারফ্লো-এক্স: অটো;" ``

Question 9

খুব সহজ, কেবল একটি ডিভের মধ্যে টেবিলটি জড়িয়ে রাখুন যা বৈশিষ্ট্য রয়েছে overflow-y:scroll;এবং overflow-x:scrollডিভের প্রস্থ এবং দৈর্ঘ্যটি টেবিলের চেয়ে ছোট করুন। এটি কাজ করবে !!!

Question 10

সিএসএস: div{ overflow-y:scroll; overflow-x:scroll; width:20px; height:30px; } table{ width:50px; height:50px; }

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