트위터 부트 스트랩 스크롤 가능 테이블

내 웹 사이트에 테이블을 갖고 싶습니다. 문제는이 테이블에 약 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에 자신의 id를 부여하여 전체 레이아웃에 영향을 미치지 않을 것입니다.

바이올린이 있습니다 : 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; }

나는 이것이 다른 누군가를 돕기를 바랍니다.

최근에 부트 스트랩과 angularjs 로이 작업을 수행해야했지만 문제를 해결하는 angularjs 지시문을 만들었 습니다 . 이 블로그 게시물 에서 실제 예제와 세부 정보를 볼 수 있습니다 .

테이블 헤더에 고정 헤더 속성을 추가하면됩니다.

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

angularjs를 사용하지 않는다면 지시문의 자바 스크립트를 조정하여 대신 직접 사용할 수 있습니다.

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에 클래스를 제공하십시오 pre-scrollable.

나는 최근 비슷한 문제가 있었고 다른 솔루션을 혼합하여 문제를 해결했습니다.

첫 번째이자 가장 간단한 것은 두 개의 테이블을 사용하는 것이 었습니다. 이것은 작동하지만 헤더와 본문 열이 정렬되지 않았습니다. 그리고 트위터 부트 스트랩 테이블과 함께 제공되는 자동 크기를 사용하고 싶기 때문에 다음과 같은 경우 헤더를 변경하는 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;
}

페이지 높이에 관계없이 테이블이 페이지 하단에 도달하기를 원했기 때문에 여기에 높이를 주석으로 표시했습니다.

헤더에 사용 된 데이터 정렬 속성도 모든 td에서 사용됩니다. 이렇게하면 모든 td의 너비와 패딩과 행의 너비를 얻을 수 있습니다. 데이터 정렬 속성을 사용하여 CSS를 사용하여 각 헤더의 패딩과 너비와 스크롤 막대가 없기 때문에 항상 더 큰 헤더 행의 너비를 설정했습니다. 커피 스크립트를 사용하는 기능은 다음과 같습니다.

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;
}

이 답변 중 어느 것도 나를 위해 만족스럽게 작동하지 않았습니다. 그들은 테이블 제목 행을 제자리에 고정시키지 않았거나 고정 열 너비가 작동하도록 요구했으며 심지어 다양한 브라우저에서 제목 행과 본문 행이 정렬되지 않은 경향이있었습니다.

총알을 물고와 같은 적절한 그리드 컨트롤 사용하는 것이 좋습니다 jsGrid 또는 내 개인 좋아하는, SlickGrid을 . 분명히 의존성을 유발하지만 테이블이 브라우저 간 지원 기능이있는 실제 그리드처럼 동작하게하려면 머리카락을 뽑을 수 있습니다. 또한 원하는 경우 열과 다른 기능의 톤을 정렬하고 크기를 조정할 수있는 옵션을 제공합니다.

Re Jonathan Wood의 제안. CMS를 사용하고 있으므로 새 div로 테이블을 래핑하는 옵션이 없습니다. JQuery를 사용하면 여기에 내가 한 일이 있습니다.

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

이것은 "table-overflow"클래스를 가진 새로운 div로 테이블 요소를 래핑합니다.

그런 다음 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/

그것이 다른 누군가를 돕기를 바랍니다.