html div 태그내에 있는 테이블을 가운데 정렬 하려면 어떤 방법이 있나요?

Question

css코드가 약한 시스템 개발 자인데요

html div 태그내에 있는 테이블이 너무 오른쪽으로 차우쳐져 있어서 보기가 좋지 않아 가운데 정렬 하려고 하는데 잘 되지ㅜ않습니다 어떤 방법이 있나요?

Answer 1

안녕하세요

아래 예제에서 중요한 건 table style의 "margin: 0 auto" 입니다.

Demo : https://codepen.io/maruara/pen/xxgXGay

- HTML

<div> <table> <tr> <td>번호</td> <td>제목</td> <td>일시</td> </tr> </table> </div>

- CSS

div { border: 1px solid #f0f; padding: 10px; } table { border-top: 1px solid #666; border-left: 1px solid #666; border-collapse: collapse; width: 50%; margin: 0 auto; } table td { border-right: 1px solid #666; border-bottom: 1px solid #666; }

Answer 2

<div> <table> <tbody> <tr><td>table cell</td><td>table cell</td></tr> <tr><td>table cell</td><td>table cell</td></tr> </tbody> </table> </div>

위와 같은 구조라면 table에 해당하는 스타일에 margin: 0 auto를 정의해 주시면 가운데 정렬이 됩니다.

샘플 : https://jsfiddle.net/v1zjnwek/