div 내에서 표 중앙에 배치

debugcn 에 게시 Dev

Anechkayf

제발 도와주세요. 온라인에서 많은 솔루션을 찾았지만 내 경우에는 작동하지 않습니다.

나는 테이블을 중앙에 배치하려고합니다. 지금은 다음과 같습니다.

HTML :

<div class="container">
  <table id="multTable"></table>
</div>

CSS :

#multTable {
  width: 100%;
  margin: 0 auto;
  display:block;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

나는 이것을 시도했다 :

.container {
  width: 100%;
}
#multTable {
  margin: 0 auto;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

그러나 테이블이 페이지 크기를 초과합니다. 여기서 내가 뭘 잘못하고 있는가?

더 나은 낯선 사람

초기 시도에서는 가능한 공간의 100 %를 차지하는 무언가를 중앙에 배치하려고하므로 테이블이 중앙에 배치되지 않습니다. 기술적으로는 중앙에 있으며 전체 공간을 차지하고 있다는 것을 알 수 없습니다.

따라서 100px. 이 컨테이너 내부에 중앙에 배치하려는 블록이 있습니다. 하지만이 블록의 100px너비 를 설정하고 있습니다 . 볼 수있는 간격이 없습니다!

따라서 이것은 작동하지 않습니다.

{ 
   width: 100%;
   margin: 0 auto;
}

대신 센터링 요소에 고정 너비를 지정해야합니다.

width: 400px; /* or whatever is needed */
margin: 0 auto;

그렇게하면 주위에 약간의 공간이 있습니다.

여기에서 확인하세요 : https://jsfiddle.net/9gwcjvp3/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

div 내에서 표 중앙에 배치

div 내에서 표 중앙에 배치

div를 중앙에 배치

div를 중앙에 배치

HTML에서 div 중앙에 배치

CSS / HTML에서 DIV 중앙에 배치

div 내에서 ul 중앙에 배치 (이미 페이지 중앙에 있음)

DIV 배열 중앙에 배치

중앙 div에 CSS 배치 div 센터

열거 / 항목 화 내에서 LaTeX 표를 중앙에 배치

div 내에서 양식 중앙에 배치

부트 스트랩 : div 내에서 헤더 중앙에 배치

div 내에서 두 이미지 중앙에 배치

본문 내에서 div 요소 중앙에 배치

본문 태그 HTML CSS 내에서 여러 중첩 DIV 중앙에 배치

본문 태그 HTML CSS 내에서 여러 중첩 DIV 중앙에 배치

div 내부의 배경 이미지 중앙에 배치

div 내부 (V, H) div를 중앙에 배치하는 방법

너비가 100 % 인 상단 표시 줄 안에 배경이있는 div 중앙에 배치

테이블로 표시되고 절대 위치에있는 div를 중앙에 배치

내 div에서 텍스트를 중앙에 배치하는 방법

중앙 div에서 항목을 서로 아래에 배치

DIV 내부의 버튼 중앙에 배치

Bootstrap 열 내부의 div 중앙에 배치

css는 중앙과 중앙의 div에 배경이있는 범위를 배치

Android에서지도 표시 중앙에 배치

SVG 차트에서 HTML div 오버레이 중앙에 배치

DIV에서 더 큰 이미지 중앙에 배치

CSS : DIV에서 여러 줄의 텍스트 중앙에 배치

div에서 탐색을 중앙에 배치하는 방법

html / css에서 div 입력 요소를 중앙에 배치