CSS를 사용하여 테이블을 배치하는 방법

Question

두 개의 열이있는 표가 있고 오른쪽에는 세 개의 단추가 있으며이 단추는 표의 다른 열에있는 내용을 변경합니다. 이 테이블을 페이지의 중앙 상단에 배치하고 싶지만 어떻게 처리해야하는지 알 수 없습니다. 여기

는 내가 원하는 걸의 스크린 샷입니다 (이미지가 너무 헤더를 보여 주지만, 지금은 중요하지) 내가 버튼이 때 이동하지 않습니다 할 수 있다면

다른 열의 내용은 변경되지만 우선 순위는 아닙니다.

도움이 될 경우 다른 구조로 표를 변경할 수도 있습니다.

여기에 HTML 코드입니다 :

버튼을 누를 때 형태의 가시성 자바 스크립트를 통해 변경

<div class='main'> 
<table class="table"> 
    <tr> 
     <td> 
      <input type="button" class="button" value="edit_menu"/><br><br> 
      <input type="button" class="button" value="edit_desc"/><br><br> 
      <input type="button" class="button" value="set_push"/> 
     </td> 
     <td> 
      <div id="content"> 
       <div id="edit_menu" display="none" class="form"> 

          here is a simple form 

       </div> 

       <div id="edit_desc" display="none" class="form"> 
        here is a second form 
       </div> 

       <div id="set_push" display="none" class="form"> 
        here is a third form 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 
</div> 

.

Answer 1

아래 코드를 사용해보십시오. CSS :

body {margin:0; padding:0;} 
.wrapper {width: 500px /* width of your table*/; margin:0 auto;} 

HTML : 당신은 .... 이렇게 그래서 우리는 당신을 도울 수있는 HTML 코드를 공유 할 수 있습니다 position`

<div class="wrapper"> 
<!-- put your table here --> 
</div>