it-swarm-ko.tech

HTML 테이블을 포함하는 div 태그와 동일한 너비로 만들려면 어떻게합니까?

Div 안에 테이블이 있습니다. 테이블이 div 태그의 전체 너비를 차지하고 싶습니다.

CSS에서는 테이블의 width100%. 불행히도, div에 margin가 있으면 테이블이 속한 div보다 넓습니다.

가능하면 완전히 크로스 브라우저 솔루션을 원하지만 IE6 및 IE7 (내부 앱이므로)을 지원해야합니다!

다음 DOCTYPE을 사용하고 있습니다 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Edit : 불행히도 HTML을 동적으로 생성 할 때 너비를 하드 코딩 할 수 없으며 div를 서로 재귀 적으로 중첩시킵니다 (각 div에 왼쪽 여백이 있으면 Nice ' 중첩 '효과).

21
Chris Roberts

아래 CSS를 <table> :

table-layout: fixed;
width: 100%;
17
Sharad Biradar

다음은 Firefox 및 IE7에서 작동하지만 지침은 다음과 같습니다. 요소에 너비를 설정하는 경우 동일한 요소에 여백 또는 패딩을 설정하지 마십시오. 단위를 혼합하는 경우 (예 : 백분율과 픽셀을 혼합하는 경우) 특히 .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

예제는 here 를 참조하십시오.

7
Nate

백분율 기반 너비는 너비가 지정된 첫 번째 상위 요소를 기준으로합니다. div에 너비가 지정되어 있지 않으면 테이블 너비와 관련이 없습니다. DOM 트리의 모양을 보여주는 간단한 버전의 마크 업을 게시 할 수 있습니까?

다른 각도에서, 부모 div에 너비가 설정되어 있고 여백이 여전히 테이블에 영향을 미치는 경우 아마도 쿼크 모드에있을 것입니다. DOCTYPE을 지정했지만 DOCTYPE 요소는 파일의 첫 번째 행이어야합니다. IE6를 다룰 때 알아 두어야 할 사항, 기본적으로 콘텐츠가 부모보다 넓은 경우 부모가 수용 할 수 있도록 확장됩니다. overflow: hiddencss 부모 요소이지만 그 과정에서 자식 요소의 일부 내용이 가려 질 수 있습니다.

4
Eric DeLabar

문제가 무엇인지 잘 모르겠습니다 .IE6/7 및 FF3에서 제대로 작동합니다. 컨테이너 DIV 요소의 너비를 설정하면 테이블 너비가 설정됩니다. .container div에 여백을 추가해도 테이블에는 영향을 미치지 않습니다. 마크 업/CSS에 레이아웃에 영향을주는 다른 요소가 있습니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>Boxes and Tables</title>
        <style type="text/css">

        div.container {
            background-color: yellow;
            border: 1px solid #000;
            width: 500px;
            margin: 5px auto;
        }

        table.contained {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 2px solid #999;
        }

        </style>
    </head>

    <body>
        <div class="container">
            <table class="contained">
                <thead>
                    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
                </thead>
                <tbody>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
3
David Heggie

나는 여기서 문제의 핵심을 알아 냈습니다. border-collapse와 관련이 있습니다. 나는 한동안 같은 문제를 겪었다. 테이블은 종종 경계가 얇기 때문에 대부분의 사람들에게는 문제가 분명하지 않습니다. Nate와 같이 div 안에 너비가 100 %로 설정된 일반 테이블을 넣으면 괜찮습니다.

그러나 테이블에서 border-collapse:collapse를 지정하면 테이블이 div에서 나옵니다. 하나의 픽셀로만 나올 수 있으며, 컨텍스트와 사용자 에이전트의 컨텍스트에 따라 전혀 다르지 않기 때문에 대부분의 사람들에게 분명하지 않습니다.

무슨 일이 일어나고 있는지 더 명확하게하려면 다음과 같이 해보십시오. David Heggie의 예제 옆에 Nate의 예제를 html 파일로 넣으십시오.

둘 다 잘 작동하는 것처럼 보입니다. 그러나 이제 Nate의 인라인 TD 스타일을 border: 40px solid blue로 변경하십시오. David의 테이블 td 스타일을 border: 40px solid #999;로 변경하십시오.이 시점에서 David의 테이블은 div에서 Nate는 여전히 작동합니다 Nate의 테이블에 border-collapse:collapse 스타일을 적용하고 그의 휴식도 지금 진행하십시오.

원인은 border-collapse입니다.

2
Chris

여백이있을 수있는 코드를 자동으로 생성하는 경우 스타일이없는 간단한 <div> 테이블을 감싸는 요소가 트릭을 할 수 있습니다.

1
Nate

나는 항상 <table width="100%">

1
Joe Morgan

다음 코드는 IE6/8, Chrome, Firefox, Safari에서 작동합니다.

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

CSS를 인라인으로 넣는 방법 (스타일 태그 사용)이 문제와 관련이있을 수 있습니다. 또는 div 테이블 블록을 둘러싼 다른 CSS입니까? 부유는 또한 문제를 일으킬 수 있습니다.

추신 더 시각적으로 확인하기 위해 영역이 확장되는 위치를 확인하기 위해 빨간색과 파란색 테두리를 설정했습니다.

0
Nestor

Internet Explorer 및 CSS 상자 모델 에 대한이 광범위한 기사가 도움이 될까요?

0
Christian Davén

이것이 CSS가 너비 속성을 처리하는 방식과 Microsoft가 처음에 상자 모델을 다르게 구현 한 이유에 대한 큰 문제입니다. Microsoft는 잃어 버렸으며 이제는 요소의 너비 또는 여백/패딩/테두리입니다.

box-sizing property 를 사용하여 CSS3에서 상황이 더 좋아질 수 있습니다.

0
buti-oxa

오버플로 : 자동; 가장 바깥 쪽 div가 이상한 것 (예 : 가장 바깥 쪽 div가 원하는 것보다 작거나 그 안에있는 div의 전체 크기를 차지하지 않는 것)이있는 경우 도움이 될 수 있습니다.

0
William

이 시도:

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

div의 패딩을 0으로 설정하면 div의 테두리와 내용 사이의 공백이 제거됩니다. 표의 너비를 100 %로 설정하고 여백을 0으로 설정하면 표의 경계와 컨테이너 사이의 공간이 제거됩니다.

0
farzad

또한 엄격한 doctype을 사용하지 않는 좋은 이유가 있습니까? 엄격이 항상 기본값이어야합니다. 전환은 레거시 코드에만 사용됩니다.

0
Konrad Rudolph