ตารางการบูต Twitter เลื่อนได้

ฉันต้องการโต๊ะในเว็บไซต์ของฉัน ปัญหาคือตารางนี้จะมีประมาณ 400 บรรทัด ฉันจะจำกัดความสูงของตารางและใช้แถบเลื่อนกับมันได้อย่างไร นี่คือรหัสของฉัน:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

ฉันพยายามใช้ความสูงสูงสุดและความสูงคงที่กับตาราง แต่ไม่ได้ผล

องค์ประกอบตารางไม่สนับสนุนสิ่งนี้โดยตรง วางตารางใน div และการตั้งค่าความสูงของ div overflow: autoและชุด

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

คุณจะต้องการห่อมันใน div ของตัวเองหรือให้รหัสของมันเองกับ span3 เพื่อที่คุณจะได้ไม่กระทบกับเลย์เอาต์ทั้งหมดของคุณ

นี่คือซอ: http://jsfiddle.net/zm6rf/

ไม่จำเป็นต้องห่อใน div ...

CSS :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

ฉันมีปัญหาเดียวกันและใช้การรวมกันของการแก้ปัญหาข้างต้น (และเพิ่มบิดของฉันเอง) โปรดทราบว่าฉันต้องระบุความกว้างของคอลัมน์เพื่อให้สอดคล้องกันระหว่างส่วนหัวและเนื้อหา

ในโซลูชันของฉันส่วนหัวและท้ายกระดาษจะคงที่ในขณะที่ร่างกายเลื่อน

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

จากนั้นใช้ CSS ต่อไปนี้:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

ฉันหวังว่านี่จะช่วยคนอื่นได้

ฉันเพิ่งจะทำเช่นนี้กับ bootstrap และ angularjs ฉันสร้างคำสั่ง angularjs ซึ่งแก้ปัญหาคุณสามารถดูตัวอย่างการทำงานและรายละเอียดในโพสต์บล็อกนี้

คุณใช้เพียงแค่เพิ่มแอตทริบิวต์ส่วนหัวคงที่ในแท็กตาราง:

<table class="table table-bordered" fixed-header>
...
</table>

หากคุณไม่ได้ใช้งานเชิงมุมคุณสามารถปรับแต่งจาวาสคริปต์ของ directive และใช้งานได้โดยตรงแทน

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

นี่อาจไม่ใช่วิธีแก้ปัญหาสำหรับการนับแถวขนาดใหญ่ ฉันเพียงแค่ใช้เคล็ดลับตารางการทำซ้ำเพื่อทำสิ่งต่างๆให้เสร็จสมบูรณ์สำหรับตารางนับแถวขนาดเล็กในขณะที่มันสามารถรักษาความกว้างของคอลัมน์แบบยืดหยุ่นคุณสามารถลองเล่นซอนี้ได้

(คอลัมน์ความกว้างคงที่คือวิธีที่ฉันใช้สำหรับตารางการนับแถวขนาดใหญ่ซึ่งต้องการเฉพาะการทำซ้ำแถวส่วนหัว)

รหัสตัวอย่าง:

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

วางโต๊ะใน div และแจก div class pre-scrollableนั้น

ฉันเพิ่งมีปัญหาที่คล้ายกันและลงเอยด้วยการแก้ไขโดยใช้โซลูชันที่แตกต่างกัน

อันแรกและที่ง่ายที่สุดคือใช้สองตารางหนึ่งอันสำหรับส่วนหัวและอีกอันสำหรับร่างกาย ใช้งานได้ แต่ส่วนหัวและคอลัมน์ร่างกายไม่ได้จัดแนว และเนื่องจากฉันต้องการใช้ขนาดอัตโนมัติที่มาพร้อมกับตาราง bootstrap twitter ฉันจึงสิ้นสุดการสร้างฟังก์ชั่น Javascript ที่เปลี่ยนส่วนหัวเมื่อ: ร่างกายมีการแสดงผล; ปรับขนาดหน้าต่าง ข้อมูลในคอลัมน์เปลี่ยนแปลง ฯลฯ

นี่คือรหัสบางส่วนที่ฉันใช้:

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

ส่วนหัวและร่างกายแบ่งออกเป็นสองตารางแยกกัน หนึ่งในนั้นอยู่ใน DIV ที่มีสไตล์ที่จำเป็นในการสร้างแถบเลื่อนแนวตั้ง นี่คือ CSS ที่ฉันใช้:

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

ฉันให้ความเห็นเกี่ยวกับความสูงที่นี่เพราะฉันต้องการให้โต๊ะไปถึงด้านล่างของหน้าไม่ว่าความสูงของหน้าจะเป็นเท่าใด

แอ็ตทริบิวต์ data-sort ที่ฉันใช้ในส่วนหัวนั้นยังใช้ในทุก td วิธีนี้ฉันจะได้ความกว้างและการเติมของทุก td และความกว้างของแถว การใช้คุณลักษณะ data-sort ฉันตั้งค่าโดยใช้ CSS การเติมและความกว้างของแต่ละส่วนหัวตามลำดับและแถวส่วนหัวที่ใหญ่กว่าเสมอเนื่องจากไม่มีแถบเลื่อน นี่คือฟังก์ชั่นการใช้ coffeescript:

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

ที่นี่ฉันคิดว่าคุณมีส่วนหัวที่เรียกว่า @headers

มันไม่สวย แต่ใช้งานได้ หวังว่าจะช่วยใครซักคน

โซลูชันทั้งหมดข้างต้นทำให้ส่วนหัวของตารางเลื่อนเกินไป ... หากคุณต้องการเลื่อน tbody ให้ใช้สิ่งนี้:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

คำตอบเหล่านี้ไม่เป็นที่น่าพอใจสำหรับฉัน พวกเขาอาจไม่ได้แก้ไขแถวส่วนหัวของตารางในสถานที่หรือพวกเขาต้องการความกว้างคอลัมน์คงที่ในการทำงานและยังมีแนวโน้มที่จะมีแถวส่วนหัวและแถวร่างกายในแนวที่ไม่ถูกต้องในเบราว์เซอร์ต่างๆ

ผมขอแนะนำให้กัด bullet และใช้การควบคุมตารางที่เหมาะสมเช่นjsGridหรือชื่นชอบส่วนตัวของฉันSlickGrid เห็นได้ชัดว่ามันเป็นการแนะนำการพึ่งพา แต่ถ้าคุณต้องการให้ตารางของคุณทำตัวเหมือนกริดจริงด้วยการรองรับข้ามเบราว์เซอร์สิ่งนี้จะช่วยให้คุณไม่ต้องง้อผม นอกจากนี้ยังให้ตัวเลือกในการจัดเรียงและปรับขนาดคอลัมน์พร้อมคุณสมบัติอื่น ๆ อีกมากมายหากคุณต้องการ

คำแนะนำของ Jonathan Wood อีกครั้ง ฉันไม่มีตัวเลือกในการตัดตารางด้วย div ใหม่เนื่องจากฉันใช้ CMS ใช้ JQuery นี่คือสิ่งที่ฉันทำ:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

สิ่งนี้ล้อมองค์ประกอบของตารางด้วย div ใหม่ที่มีคลาส "table-overflow"

จากนั้นคุณสามารถเพิ่มคำจำกัดความต่อไปนี้ในไฟล์ css ของคุณ:

.table-overflow { overflow: auto; }     

วางตารางไว้ใน div เพื่อทำให้ตารางเลื่อนได้ในแนวตั้ง เปลี่ยนoverflow-yเป็นoverflow-xทำให้ตารางเลื่อนได้ในแนวนอน เพียงoverflowเพื่อให้ตารางเลื่อนได้ทั้งแนวนอนและแนวตั้ง

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

คิดว่าฉันจะโพสต์ที่นี่เนื่องจากฉันไม่สามารถทำงานกับ Bootstrap 4 ได้ฉันพบสิ่งนี้ทางออนไลน์และทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน ...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

ฉันยังแนบ jsfindle ที่ใช้งานได้

https://jsfiddle.net/jgngg28t/

หวังว่ามันจะช่วยคนอื่น