div 외부에서 오버플로되는 테이블

너비가 명시 적으로 선언 된 테이블이 부모 외부에서 오버플로되는 것을 중지하려고합니다 div. 나는을 사용하여 어떤 식 으로든 이것을 할 수 있다고 생각 max-width하지만 이것이 작동하지 않는 것 같습니다.

다음 코드 (창이 매우 작음)는이를 발생시킵니다.

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

빨간색 선은의 오른쪽 테두리이며 div브라우저 창을 작게 만들면 표가 맞지 않음을 알 수 있습니다.

다음을 수행하여 되돌립니다.

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

또한 다음과 같이 조언합니다.

• center태그를 사용하지 마십시오 (사용되지 않음).
• width, bgcolor속성을 사용하지 말고 CSS ( width및 background-color)로 설정하십시오.

(렌더링 된 테이블을 제어 할 수 있다고 가정)

를 사용하여 테이블이 상위 div 이상으로 확장되는 것을 방지 할 수 있습니다 table-layout:fixed.

아래 CSS는 테이블을 둘러싼 div의 너비로 확장되도록합니다.

table 
{
    table-layout:fixed;
    width:100%;
}

여기서이 트릭을 찾았 습니다 .

조잡한 해결 방법 display: table은 포함하는 div에 설정 하는 것입니다.

위에서 언급 한 모든 솔루션을 시도했지만 작동하지 않았습니다. 나는 다른 하나 아래에 3 개의 테이블이 있습니다. 마지막 하나가 넘쳤습니다. 다음을 사용하여 수정했습니다.

/* Grid Definition */
table {
    word-break: break-word;
}

엣지 모드의 IE11의 경우 다음으로 설정해야합니다. word-break:break-all

처음에는 James Lawruk의 방법을 사용했습니다. 그러나 이것은의 모든 너비를 변경했습니다 td.

나를위한 해결책 white-space: normal은 열 (로 설정 됨 white-space: nowrap) 에서 사용 하는 것이 었습니다 . 이렇게하면 텍스트가 항상 끊어집니다. 를 사용 word-wrap: break-word하면 단어 중간 정도라도 필요할 때 모든 것이 중단됩니다.

CSS는 다음과 같습니다.

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

이것은 word-wrap: break-word표의 단어를 읽기 어렵게 만들 수 있으므로 항상 바람직한 해결책은 아닙니다 . 그러나 테이블을 올바른 너비로 유지합니다.

나는 위의 거의 모든 것을 시도했지만 나를 위해 작동하지 않았습니다 ... 다음은

word-break: break-all;

상위 div (테이블의 컨테이너)에 추가됩니다.

overflow-x: auto;
overflow-y : hidden;

위의 스타일을 상위 div에 적용합니다.

있다 width="400"테이블에, 그것을 제거하고 작동합니다 ...