표 열 너비를 어떻게 제한 할 수 있습니까?

표 열 너비를 어떻게 제한 할 수 있습니까?

---

내 테이블의 열 중 하나는 공백없이 긴 텍스트를 포함 할 수 있습니다. 너비를 150px로 제한하려면 어떻게해야합니까? 항상 150px가되는 것은 원하지 않지만 (비어 있으면 좁아 야합니다), 긴 텍스트가있는 경우 150px로 제한하고 텍스트를 줄 바꿈하고 싶습니다.

다음은 테스트 예입니다. http://jsfiddle.net/Kh378/ (세 번째 열을 제한하겠습니다).

미리 감사드립니다.

업데이트 :
이 스타일 설정 :

word-wrap: break-word;
max-width: 150px;

IE8 (다른 컴퓨터에서 테스트 됨)에서는 작동하지 않으며 어떤 버전의 IE에서도 작동하지 않는다고 생각합니다.

---

업데이트 됨

테이블 td과 th태그에 추가했습니다.

word-wrap: break-word;
max-width: 150px;

모든 브라우저에서 완전히 호환되지는 않지만 시작됩니다.

---

대신 너비를 사용해야합니다.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                
            <th style="width: 150px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

그러나 <thead>섹션 에서만 .

---

다음으로 열 스타일을 지정할 수 있어야합니다.

max-width: 150px; 
word-wrap: break-word;

참고 word-wrapIE 5.5 이상, 파이어 폭스 3.5에서 지원되며, 웹킷 브라우저 (크롬과 사파리).

---

Chrome에서 몇 가지 실험을 한 후 다음과 같은 결과를 얻었습니다.

• 테이블 <th>에 "너비"또는 "최대 너비"세트가 있어야 하는 경우
• 는 <td>"최대 너비"및 "단어 줄 바꿈 : break-word;"를 설정해야합니다.

"너비"를 사용하면 <th>해당 값이 사용됩니다. "최대 너비"에서 "최대 너비"를 사용하면 <th>의 값이 <td>대신 사용됩니다.

따라서이 기능은 매우 복잡합니다. 그리고 머리글이 없거나 "중단 어"가 필요한 긴 문자열이없는 테이블도 연구하지 않았습니다.

---

최대 너비를 시뮬레이션하는 옵션이 있습니다.

simulateMaxWidth: function() {
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell
    this.$el.find('th').each(function(ind, th) {
        var el = $(th);
        var maxWidth = el.attr('max-width');
        if (maxWidth && el.width() > maxWidth) {
            el.css('width', maxWidth + 'px');
        }
    });
}

this function can be called on $(window).on('resize', ...) multiple times

this.$el

represents parent element, in my case I have marionette

for those th elements which should have max-width, there should be a max-width attribute like:

<th max-width="120">

---

1) Specify width for each column in <th> according to your need.

2) Add word wrap for each <td> in <tr> of the <table>.

word-wrap: break-word;

---

it's very easy

You could add attributes like these

max-width

max-height

They can be set in html as an attribute or in CSS as a style

참고URL : https://stackoverflow.com/questions/7410784/how-can-i-limit-table-column-width