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

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

---

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; }

---

You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.

"Overflow:Hidden" hides the whole content, which does not fit into the defined box.

Example:

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; }

EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...

---

I would try setting it to max-width:50px;

---

You can also use percentages, and/or specify in the column headers:

<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>

The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.

Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.

---

This works for me

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

참고URL : https://stackoverflow.com/questions/15668583/force-table-column-widths-to-always-be-fixed-regardless-of-contents