tbody에서 콘텐츠로 스크롤하지 않는 테두리 오버 플로우 : 자동;

이 오버 플로우를 스크롤 할 때이 td의 경계선을 따라갈 수 없습니다. <tbody>. 수정에 대한 아이디어가 있습니까?tbody에서 콘텐츠로 스크롤하지 않는 테두리 오버 플로우 : 자동;

참고 : 고정 또는 행을 디스플레이를 만들기 : 테이블 레이아웃을 설정 블록이 행이 자신의 유동성을 잃게됩니다 같은 옵션이 아닙니다 .. 당신은 최신 파이어 폭스에서 문제를 볼 수 있습니다

, 그래서 나는 그것이 어딘가에서 엉망이라고 생각합니다. 이 http://www.webdevout.net/test?01y

HTML :
이
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> </head> <body> <table> <thead><th>One</th><th>Two</th><th>Three</th></thead> <tbody> <tr><td>Item</td><td>Item</td><td>Item</td></tr> <tr><td>Item</td><td>Item</td><td>Item</td></tr> <tr><td>Item</td><td>Item</td><td>Item</td></tr> <tr><td>Item</td><td>Item</td><td>Item</td></tr> </tbody> </table> </body> </html>

CSS :
또한
table {width:100%;border-collapse:collapse;} tbody {height:200px;overflow:auto;} td {border-bottom:1px solid #f00;}

출처

2010-05-17 tester

정말로 테이블의 모든 행에 질문의 코드를 써야 했습니까?! BTW IE7에서 작동합니다. –

죄송합니다, 여분의 tr의 .. – tester

참고, 내 대답에 몇 가지 해결 방법을 추가했습니다. – Andrew

에서 작동하지 않습니다 여기에

이 테스트 I 설정입니다 (데모의 하단으로 스크롤) IE. This은 멋지게 요약합니다. "CSS 2.1 사양 11.1.1 절에 정의 된 overflow 속성은 table-row-group 객체에는 적용되지 않습니다."

this recent question on SO에 설명 된 것처럼 몇 가지 해결 방법이 있습니다. link from the OP에는 두 가지 흥미로운 솔루션이 있습니다. 첫 번째는 출력을 변경할 수없는 경우 사용자에게 도움이 될 수 있습니다. 기본적으로 내부 div를 overflow : auto로 설정하고 외부 div에 대한 thead를 절대적으로 배치하여 내부 컨테이너에서 꺼내는 두 개의 div에 테이블을 배치하는 작업이 포함됩니다.

출처

2010-05-17 21:41:31 Andrew

이 방법으로 크로스 브라우저 문제가 있음을 알고 있습니다. Firefox 3.6에서 테두리가 왜 스크롤되지 않는지 알아 내려고하고 있습니다. – tester

FYI : IE7에서 작동합니다. FF 3.6에서는 작동하지 않으며 Safari 4.0.4에서 작동합니다. 아주 이상한. –

요점은 테두리가 작동하지 않을 것이기 때문에 테두리가 스크롤되지 않는다는 것입니다 (사양에 따라). 그것이 전혀 작동한다는 사실은 여기서 이상한 행동입니다 ... – Andrew

FF에서 펑키 한 동작이 왜 발생하는지 잘 모르겠지만 해결 방법은 두 개의 테이블을 만들고 두 번째 테이블을 div에 넣는 것입니다.

HTML :

<table> 
<thead> 
    <th>One</th><th>Two</th><th>Three</th> 
</thead> 
</table> 
<div> 
<table> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
</table> 
</div>

CSS : 나는 그들이 다른 테이블에있어 이후 열 정렬 보장하는 THS 및 TDS 특정 폭을 추가,하지만 당신은에 없을 수도 있습니다

table {width:100%;border-collapse:collapse;} 
div {height:200px;overflow:auto;} 
th {width:33%;} 
td {border-bottom:1px solid #f00;width:33%;}

지정하십시오.

출처

2010-05-17 22:01:58 mVChr

재미있는 해결 방법이지만 테이블이 외부 소스에 의해 채워지는 경우 html 구조를 편집하는 것은 일반적으로 불가능합니다 (예 : drupal보기 테이블 출력). 또한, 나는 이것이 세포 유동성을 잃어 버리고 thead와 tbody 사이의 세포 폭 동기화를 잃어 버린다는 사실이 이것을 실현 불가능한 선택으로 만들 것이라고 믿습니다. – tester

tbody에서 콘텐츠로 스크롤하지 않는 테두리 오버 플로우 : 자동;

답변

관련 문제