div에서 래핑하지 않고 표를 가로로 스크롤

기사의 너비가 웹 페이지 레이아웃에서 사용 가능한 너비를 초과 할 때마다 내 기사에서 표를 가로 스크롤 할 수있게하려고했습니다. CSS만으로이 작업을 시도했지만 실패했습니다. 그래서 jQuery : $('table.data').wrap('<div class="tcontain" />');을 사용하여 div에서 모든 것을 래핑해야했습니다. 그럼 다음 CSS를 적용 tcontain div : width:100%;overflow-x:scroll;div에서 래핑하지 않고 표를 가로로 스크롤

이 작동하지만 JavaScript를 피하고 싶습니다. 도와주세요!

출처

2013-07-21 erfan

마크 업을 보지 않고도 해결책을 제시하기가 어렵습니다. 당신은 바이올린이나 사이트 링크를 게시 할 수 있습니까? –

@koala_dev 여기에 http://jsfiddle.net/bLyu6/ – erfan

이 해결책을 찾았지만 유감스럽게도 IE에서는 작동하지 않지만 IE9에서는 작동하지 않습니다. 결국

Exaple fiddle

table{ 
    max-width: 100%; 
    overflow-x: auto; 
    display: block; 
}

, 나는 당신이 당신의 파일에 마크 업을 변경하는 번거 로움을 피하고 싶은 경우 JS 솔루션은 최선을 다 할 것입니다 생각합니다.

출처

2013-07-21 20:15:57

감사합니다. 나는 JS 코드를 유지해야한다는 것에 동의한다. 그러나 당신의 해결책은 지금까지는 최고입니다. 사실 우리는 스마트 폰 사용자가 좁은 응답 설계에서 테이블을 수평으로 스크롤 할 수있게하려고했습니다. – erfan

너비를 100 %로 지정하십시오.

table{width: 100%;}

출처

2013-07-21 08:06:19

감사합니다! 그러나 이것은 작은 테이블을 뻗는다. – erfan

원하는 경우 너비를 약간의 값으로 지정하십시오. –

div에서 래핑하지 않고 표를 가로로 스크롤

답변

관련 문제