내용에 관계없이 항상 테이블 열 너비를 고정하도록 강제

나는 html 테이블과 table-layout: fixed너비가 설정된 td가 있습니다. 열은 여전히 ​​확장되어 공백이없는 텍스트의 내용을 포함합니다. div에서 각 td의 내용을 래핑하는 것 외에 이것을 수정하는 방법이 있습니까?

예 : http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

이 예에서 AAAAAAAAAAAA ...가있는 열이 명시 적으로 50px 너비로 설정 되었음에도 불구하고 확장되는 것을 볼 수 있습니다.

테이블 너비 지정 :

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

jsFiddle 참조

다음 CSS를 살펴보십시오.

word-wrap:break-word;

웹 브라우저는 기본적으로 "단어"를 분해하지 않아야하므로 브라우저의 정상적인 동작을 경험하게됩니다. 그러나 이것을 word-wrap CSS 지시어로 재정의 할 수 있습니다.

전체 테이블의 너비를 설정 한 다음 열의 너비를 설정해야합니다. "너비 : 100 %;" 요구 사항에 따라 정상이어야합니다.

자동 줄 바꿈을 사용하는 것은 원하는 것이 아닐 수 있지만 레이아웃을 변형하지 않고 모든 데이터를 표시하는 데 유용합니다.

CSS 전에 테이블을 단단하게 만드십시오. 테이블의 너비를 계산 한 다음 각 td가 명시적인 너비를 갖는 '제어'행을 사용하여 모두 테이블 태그의 너비에 합산합니다.

먼저 올바른 HTML을 사용하여 모든 곳에서 작동하기 위해 수백 개의 html 이메일을 처리해야하고, 그다음에 w / css 스타일링은 모든 IE, 웹킷 및 모질라의 많은 문제를 해결할 것입니다.

그래서:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

300px 너비로 테이블을 유지합니다. 너비보다 더 큰 이미지보기

당신은 추가 할 수 있습니다 div받는 td그 후 스타일. 예상대로 작동합니다.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

그런 다음 CSS.

td div { width: 50px; overflow: hidden; }

"overflow : hidden"또는 "overflow-x : hidden"(너비 만)으로 작업 할 수도 있습니다. 여기에는 정의 된 너비 (및 / 또는 높이?)와 "디스플레이 : 블록"도 필요합니다.

"Overflow : Hidden"은 정의 된 상자에 맞지 않는 전체 내용을 숨 깁니다.

예:

http://jsfiddle.net/NAJvp/

HTML :

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS :

td div { width: 100px; overflow-y: hidden; }

편집 : 나에 대한 수치심, 나는 이미 "오버플로"를 사용하고 있습니다. 요소에 "display : block"을 설정하지 않았기 때문에 작동하지 않는 것 같습니다.

max-width : 50px로 설정하려고합니다.

백분율을 사용하거나 열 머리글에 지정할 수도 있습니다.

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

백분율이있는 보너스는 더 낮은 코드 유지 관리입니다. 열 너비를 다시 지정할 필요없이 테이블 너비를 변경할 수 있습니다.

주의 사항 : 픽셀 단위로 지정된 표 너비는 HTML 5에서 지원되지 않는다는 것을 이해합니다. 대신 CSS를 사용해야합니다.

이것은 나를 위해 작동합니다

td::after { 
content: ''; 
display: block; 
width: 30px;
}