Cant 부트 스트랩 테이블 가져 오기

Question

최대 내용 높이가 200px 이상이되도록 스크롤 크기를 조정하려면 부트 스트랩 테이블을 가져와야합니다.

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 97%; 
} 
table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
    width: 100%; 
} 

& HTML :

나는 테이블에 대한 CSS가 설정되어

테이블은 여전히 ​​페이지의 높이와 폭 그러나

<table class="table table-striped jSpeeds table-fixed"> 
    <thead> 
     <tr><th>Time</th><th>Speed</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>TestRow</td><td>TestVal</td></tr> 
    </tbody> 
</table> 

. 나는 누군가가 도울 수 있는지 궁금해하고 있었다.

Please see the JSBin example here

감사합니다.

Answer 1

부트 스트랩의 responsive-table을 사용하십시오. 너의 <table>을 이것으로 싸서. 랩퍼의 높이를 정의 할 수 있도록

<div class="table-responsive fix-table-height"> 
    // your table here 
</div> 

그런 다음 래퍼 클래스 fix-table-height를 추가합니다. 귀하의 경우에는 200px;을 원합니다. 그래서 당신은이 작업을 수행 할 수 있습니다

.fix-table-height{ 
    max-height:200px; 
} 

이 출력 명시 적으로 TD 대한으로 추가해야 jsFiddle

Answer 2

표의 본문과 행을 변경하여 표시를 차단해야합니다. 같은 것을 할 :

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 100%; 
} 

table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
} 

table.table-fixed tbody, 
table.table-fixed tr { 
    display: block; 
    width: 100%; 
} 

table.table-fixed th, 
table.table-fixed td { 
    width: 300px; 
} 

편집 나는 강력한 솔루션을 제공하기 위해 도전 이후

, 여기 것은 제공 :

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 100%; 
} 

table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
} 

table.table-fixed tbody, 
table.table-fixed tr { 
    display: block; 
    width: 100%; 
} 

table.table-fixed th, 
table.table-fixed td { 
    display: block; 
    float: left; 
    width: 50%; 
} 

Gist Link

Answer 3

단지에 당신의 CSS를 조정 이 :

tbody { 
    display: block; 
    overflow: auto; 
    height: 230px; 
} 

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