2012-11-29 2 views
0

fiddle - 여기에 2 개의 똑같은 스타일의 테이블이 있습니다. TD의 너비는 table-layout.에 의해 자동으로 조정됩니다. 한 줄의 텍스트 만 있으면 제대로 작동합니다. 그러나 텍스트가 더 많고 텍스트가 뒤틀린다면 텍스트의 가장 긴 뒤틀린 부분이 아닌 모든 텍스트 (한 줄에있는 것처럼)에서 너비가 계산되는 것 같습니다.테이블 레이아웃을 중심으로 한 테이블

질문은 1 단계 테이블에서와 같은 방식으로 테이블 nr 2의 콘텐츠를 가운데에 배치하는 방법입니까? (기껏해야 중심에있는 것처럼 보이지는 않는다.)

enter image description here - 이것이 어떻게 보이는지 (낮은 것) - 노란 공간을 필요로하지 않는다.

+0

테이블 너비 또는 너비를 정의하지 않으면이 결과가 나타납니다. 이것이 이치에 맞기 때문입니다. –

답변

2

td { text-align:center }

은 첫 번째 테이블의 텍스트 실제로 중앙에 있지 않습니다. 세포 양쪽에 숨쉴 공간이 없기 때문에 그런 식으로 나타납니다.

위와 같이 전역 선언을하면 나머지 셀을 추가로 조정할 수 있습니다.

td.first { text-align:left; font-weight:700 } , 당신은 폭을 선언하지 않고 그 효과를 달성 할 수있을 않을거야

편집 할 수 있습니다. 테이블은 기본적으로 div과 같지 않습니다. 따라서 display:block, width:80%을주고 이제는 테이블 센터인데 td은 부모를 올바르게 채우지 못했기 때문에 width:100%이라고했습니다. 난 당신이 찾고있는 생각 http://jsfiddle.net/hJXb9/

+0

첫 번째 div가 가운데에 정렬 되더라도 아무리 스타일이 추가 되어도 테이블이 더 넓을 수 있으며 테이블의 중심에 있지 않기 때문에 가능합니다. – user1785870

+0

http://jsfiddle.net/UMFE4/1/ - 어떻게 보일 것인가? (그러나 나는
을 어디에서 썼는지 알고있다.) – user1785870

+0

대답 편집 – Dawson

0

:

나는이 후하는지 생각합니다.

Live Demo

<table style="width:60%;margin-left:20%;margin-right:20%;"> 
    <tr> 
     <td style="background:green;text-align: center; vertical-align: middle;"> 
      TADA 
     </td> 
     <td style="background:yellow;text-align:center; vertical-align: middle;"> 
      Lorem ipsum dolorsitamet kjfldslggfh;l</td> 
     </tr> 
    </table> 
희망, 난 것이다 당신을 도와줍니다. 감사. !! !!

+0

에서 보자. 녹색 div에 여유 공간이있을 때 왼쪽 정렬하지 않기를 바랍니다. 그리고 그것은 여기에 노란색 하나에 붙어 있어야한다 : http://jsfiddle.net/UMFE4/1/ (내가 뭘했는지는
그것이 어디에서 휘어지는 지 - 그러나 나는 텍스트가 다른 경우 뒤 틀릴 때를 모른다) – user1785870

+0

내 수정 된 답변보기 –

+0

나에게 도움이 될지 알려주시겠습니까? –

관련 문제