CSS : Scrollable Nested Table, FF에서 작동, IE에서 실패 함

IE에서 작동하는 것이 정말 좋을 것 같습니다. 테이블을 여기에 사용해서는 안된다는 사실을 바꿀 수는 없습니다. IE는 내가 지원하고있는 프로젝트가 지원해야하는 유일한 브라우저입니다.CSS : Scrollable Nested Table, FF에서 작동, IE에서 실패 함

<html> 
<body> 

<style type="text/css"> 
#test table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 95%; 
} 

#test table td { 
    border: 1px solid rgb(0,0,0); 
} 

#test table div.scrollable { 
    max-width: 100%; 
    overflow: auto; 
} 

#test table table { 
    table-layout: auto; 
    width: 100%; 
} 
</style> 

<div id="test"> 
<table> 
<tr> 
<td colspan="2"> 

<div class="scrollable"> 

<table> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</ td> 
</tr> 

</table> 

</div> 

</td> 
</tr> 
<tr><td>1</td><td>2</td></tr> 
<tr><td>1</td><td>2</td></tr> 
</table> 
</div> 
</body> 
</html>

나는이 함께 플레이 할 수 Tryit 편집기를 사용하고있다 :

여기에 코드입니다. 도와 주셔서 미리 감사드립니다.

출처

2009-02-04 overslacked

당신은 당신이하십시오 기대하는 행동을 명확하게 할 수 있나요? –

난 당신이 달성하기 위해 노력하고 정확히 모르겠지만, 당신의 CSS에서 이것을 시도 :

#test table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 50%; 
} 

#test table td { 
    border: 1px solid rgb(0,0,0); 
} 

#test table div.scrollable { 
    max-width: 100%; 
    overflow: auto; 
} 

#test table table { 
    table-layout: auto; 
    width: 100%; 
} 

.scrollable { 
    height:40px; 
    width:100%; 
    overflow-x:scroll; 
    overflow-y:none; 

}

출처

2009-02-04 18:55:39

효과가있었습니다! 나는 #test 테이블 div.scrollable을 .scrollable로 대체했으며 작동했다. overflow-x와 overflow-y를 지정하는 것은 오버플로가 아닌 IE에서 문제를 수정하고 FF에서 예상되는 동작을 유발하는 것으로 보입니다. 다시 한번 감사드립니다. – overslacked

CSS : Scrollable Nested Table, FF에서 작동, IE에서 실패 함

답변

관련 문제