2017-01-15 1 views
0

다음 두 가지 속성으로 html5/css 테이블을 만드는 더 우아하고 (더 간단한) 방법이 있습니까? 1) 페이지보다 작을 때 중앙에 배치 ; 페이지에 가로 스크롤 막대가 나타날 때 작업 오른쪽 여백을 갖는 2); 내가 여기 몇 가지 제안에 다른 사이트를 기반으로 한 것보다 다른, 그것은 곧, 내부 인라인 블록 사업부 및 외부 테이블 사업부에서 포장 : 당신이 무슨 뜻인지 정확히 확인테이블을 가운데에 놓고 오른쪽에 여백을 두는 더 간단한 방법을 찾으십시오.

<DIV STYLE="display:table; margin:0 auto;"> 
<DIV STYLE="display:inline-block;"> 
<TABLE STYLE="margin-left:Npx; margin-right:Mpx... 
+0

당신은 당신이 원하는 무슨의 그림을 만들려고 수 있습니까? :) – TheYaXxE

+0

페이지보다 큰 테이블의 오른쪽 여백에 대한 그림이 여기에 나와 있습니다. 여기에는 치료법 (내 내부 랩퍼)이 나와 있습니다. [link] (http://jsfiddle.net/nnJ6F/5/) 그러나 내가 그렇게 할 때 테이블이 더 얇을 때 나는 중심에 놓을 수 없기 때문에 아웃터 래퍼를 추가한다고 생각했습니다. 이 모든 것은 작동하지만 더 쉬운 방법이 있어야한다고 생각합니다. – miodrag

+0

나는 오른쪽 가장자리 (큰 경우)와 가운데에 놓인 (작은 경우) 테이블 모두 – TheYaXxE

답변

0

하지,하지만이 시도 ...

은 래퍼 안에 당신에게 table을 넣고 justify-content: centeroverflow: scroll로 인 flexbox를 사용, 그것은 래퍼보다 작은 있는지

그런 다음 테이블이 중심되고,이 래퍼보다 더 큰 경우 가로 스크롤 막대가 나타납니다 .

#wrapper { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    overflow: scroll; 
} 

Example Fiddle

+0

아마 내 위의 의견은 다소 상황을 명확히합니다. 여백 테이블에 가로 여백이 추가되면 표시되지 않으며 래퍼에 추가되면 왼쪽에만 스크롤 바가 나타납니다. – miodrag

관련 문제