Làm cách nào để giới hạn độ rộng cột của bảng?

Question

Một trong các cột trong bảng của tôi có thể chứa văn bản dài không có khoảng trắng. Làm thế nào tôi có thể giới hạn chiều rộng của nó đến, nói, 150px? Tôi không muốn nó là 150px luôn luôn (nếu nó trống rỗng nó nên được thu hẹp), nhưng nếu có một văn bản dài tôi muốn nó được giới hạn với 150px và văn bản được bọc.

Dưới đây là ví dụ kiểm tra: http://jsfiddle.net/Kh378/ (hãy giới hạn cột thứ 3).

Cảm ơn bạn trước.

Cập nhật:
Thiết phong cách này:

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

không hoạt động trong IE8 (thử nghiệm trên các máy tính khác nhau) và Tôi cho rằng nó không hoạt động trong bất kỳ phiên bản của IE.

Answer 1

Updated

Trên bảng của td và th thẻ tôi đã thêm:

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

Không hoàn toàn tương thích ở mọi trình duyệt nhưng một sự khởi đầu.

Answer 2

Bạn sẽ có thể để tạo kiểu cột của bạn với:

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

Lưu ý rằng word-wrap được hỗ trợ trong IE 5.5+, Firefox 3.5+, và trình duyệt WebKit (Chrome và Safari).

Answer 3

Câu hỏi đã được trả lời trong another StackOverflow thread. Tóm lại, bạn chỉ nên sử dụng chiều rộng thay vì chiều rộng tối đa.

Answer 4

Bạn cần sử dụng chiều rộng thay thế.

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

Nhưng chỉ trong phần <thead>.

Answer 5

có một tùy chọn để mô phỏng max-width:

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

chức năng này có thể được gọi vào $ (window) .Trên ('thay đổi kích thước, ...) nhiều lần

this.$el 

đại diện cho phần tử gốc, trong trường hợp của tôi, tôi có marionette

cho các yếu tố thứ đó phải có chiều rộng tối đa, phải có thuộc tính có chiều rộng tối đa như:

<th max-width="120"> 

Answer 6

1) Chỉ định chiều rộng cho mỗi cột trong <th> theo nhu cầu của bạn.

2) Thêm từ bọc cho mỗi <td> trong <tr> của số <table>.

word-wrap: break-word; 

Answer 7

Sau một số thử nghiệm trong Chrome tôi đến như sau:

• nếu bảng của bạn có một <th> rằng cần phải có hoặc là một "width" hay một "max-width" thiết lập
• sự <td> 's phải có một "max-width" và "word-wrap: break-word;"

Nếu bạn sử dụng "chiều rộng" trong giá trị <th> giá trị của nó sẽ được sử dụng. Nếu bạn sử dụng "chiều rộng tối đa" trong giá trị <th> thì giá trị "chiều rộng tối đa" của <td> sẽ được sử dụng thay thế.

Vì vậy, chức năng này khá phức tạp. Và tôi thậm chí còn không nghiên cứu các bảng không có tiêu đề hoặc không có các chuỗi dài cần một từ "ngắt lời".

Answer 8

nó rất dễ dàng

Bạn có thể thêm các thuộc tính như thế này

max-width

max-height

Họ có thể được thiết lập trong html như một thuộc tính hoặc trong CSS dưới dạng kiểu