2011-09-17 5 views
2

테이블을 블록 요소처럼 동작시키고 싶습니다. 난 너비로 설정할 수 없습니다 : 100 % 패딩이 있기 때문에 100 % 패딩 PX가 될 것입니다.표시 할 테이블 설정 : block

체크 아웃 : http://jsfiddle.net/LScqQ

마지막으로 테이블 난 당신이 박스 그림자를 볼 수 있으며, 원하는 것을? 하지만 테이블 아이들은 그런 식으로 싫어 해요 ^^

THEAD 내부의 TH가 문제라고 생각합니다. 66 %에서 33 %의 종횡비를 얻지 못합니다. 도움말이 원하는

...

+2

이것은 블로그 또는 포럼이 아닙니다. 질문을 새로운 정보로 업데이트해야한다면 명확하게 언급하십시오. 새로운 독자는 사전 편집 질문에 대한 지식이 없습니다. –

+0

답변이 원하는 답변이 아니면 답장을 보내 주시거나 답변의 왼쪽에있는 체크 표시를 클릭하여 질문을 종료하십시오. 환영합니다. 도움이 되셨기를 바랍니다. –

답변

5

마침내 나는 혼자 답을 발견했다.

래퍼 컨테이너 내부에 표를 넣고이 유사한 CSS 규칙 쓰기 : 지금

// HTML

<div class="wrapper_full"> 
<table>...</table> 
</div> 

// CSS

.wrapper_full > table 
{ 
    width: 100%; 
} 

을 테이블은 더 이상 레이아웃을 오버플로하지 않으며 대부분의 요소처럼 완벽하게 적합합니다.

+0

내 문제가 해결되었습니다. 왜 전에 생각하지 않았습니까 ?? :) – Cullub

6

테이블은 display: table해야한다. 크기 조정이 걱정되면 box-sizing: content-box을 사용하십시오.

이유는 display: table이 행과 열을 배치해야하는 테이블 레이아웃 메커니즘을 생성하기 때문입니다. 특정 조건에서 필수 요소가 없으면 암시 적으로 만들어 지지만 문제가 발생할 수 있습니다. (div으로 테이블 레이아웃을 만들고 이것을 , trtd 요소의 기본 사용자 에이전트 스타일 인 display: table, table-row, table-cell으로 설정하여 테스트 할 수 있습니다. div 조합을 사용하면 브라우저가 암시 적으로 표 레이아웃을 잘못 암시하는 경우가 있습니다.

실제 표 레이아웃을 원한다면 항상 display: table-* 스타일을 그대로 두십시오. 너의 폭 문제를 적절한 스타일로 정렬해라. 당신이 원하는 것을 더 잘 묘사한다면 아마도 더 나은 대답을 얻을 수있을 것입니다.