2013-07-10 2 views
-1

그래서 div 안에 테이블이 있고 너비를 지정하지 않았습니다. 콘텐츠가 많은 표의 경우 표의 너비가 상위 div의 너비를 초과하는 것으로 보입니다. 그게 왜 일어나는거야? 테이블 너비가 항상 상위 div의 몇 퍼센트가되도록하려면 어떻게해야합니까?테이블과 부모 div 간의 관계

+0

div가 부동으로 선언 되었습니까? – Mik378

+0

나는 당신이 이미 시도한 것에 대해 더 많은 정보를 제공하고, 예를 들어 당신이 달성하고자하는 것을 스케치하는 것이 좋습니다. – Sikian

+0

잘못된 질문을 무의식적으로 요구할 수 있으며 제공 할 수있는 정보가 많을수록 더 나은 답변을받을 수 있습니다. –

답변

0

테이블의 너비를 설정하고 CSS가 div의 너비를 다른 곳에서 선언하지 않았는지 확인하십시오. HTML을 두 번 확인하여 테이블을 올바르게 중첩하고 div 태그를 닫았는지 확인하십시오. 이런 식으로 뭔가 :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Whatever</title> 
    </head> 
    <body> 
    <div> 
     <table><!--all your table stuffs--></table> 
    </div> 
    </body> 
</html> 

CSS는 :

div{ 
    width: 90%; 
} 

table { 
    width: 90%; 
} 

클래스는이 문제를 해결하기 위해 더 좋은 방법이지만, 위의 코드는 사업부가 페이지 너비의 90 % 있는지 확인하며, 테이블이 div 너비의 90 % (여백, 여백 등 허용).

+0

이것은 내가 원한 것이다. 감사합니다 – praks5432

+1

포함 된 요소의 내용이 중단되지 않으면 위 코드가 작동하지 않습니다 (예 : 긴 연속 된 텍스트 줄, 큰 이미지 등). 디폴트로'auto' 인'table-layout'을 설정할 필요가 있습니다. – nathanchere

0

CSS는 친구입니다.

<table style="table-layout:fixed"> 

이렇게하면 테이블 요소의 내용이 내용이 아닌 너비로 표시됩니다.

필수 숟가락 급지 예 :이 예에서

<style> 
#sampleTable { 
    table-layout:fixed; 
    width:80%; 

    background-color:#99F; 
} 

#container { 
    width:500px; 

    background-color:#F99; 
} 
</style> 

<div id="container"> 
    <table id="sampleTable"> 
     <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr> 
    </table> 
</div> 

테이블은 항상 400 개 픽셀 (500 픽셀의 상위 80 %)이어야한다. 패딩, 여백 등에 대한 일반적인주의 사항은 여전히 ​​적용됩니다.

일반적으로 테이블의 크기를 밀어 넣을 내용을 결정할 때 word-wrapoverflow을 고려할 수도 있습니다.

+1

및 인라인 CSS가 적입니다.) – mikedugan

+0

빠른 질문에 대한 빠른 예입니다. – nathanchere

+0

그냥 OP를 위해 밖으로 가리키는, 너에 잔소리하려고하지 – mikedugan

관련 문제