[twitter-bootstrap] 트위터 부트 스트랩 스크롤 가능 테이블

Program / 글쓴이

내 웹 사이트에 테이블을 갖고 싶습니다. 문제는이 테이블에 약 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>