Làm cách nào để ngăn văn bản trong ô bảng khỏi gói

Question

Có ai biết cách tôi có thể ngăn văn bản trong ô của bảng không? Điều này là dành cho tiêu đề của một bảng, và tiêu đề dài hơn rất nhiều so với dữ liệu bên dưới nó, nhưng tôi cần nó để chỉ hiển thị trên một dòng. Sẽ ổn nếu cột rất rộng.

HTML của tôi bảng (giản thể) trông như thế này:

<table> 
    <thead> 
    <tr> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Tiêu đề tự nó được bọc trong một div bên trong thẻ th vì những lý do liên quan đến javascript trên trang.

Bảng được sắp xếp với các tiêu đề được gói thành nhiều dòng. Điều này dường như chỉ xảy ra khi bảng đủ rộng, vì trình duyệt đang cố gắng tránh di chuyển ngang. Trong trường hợp của tôi, mặc dù, tôi muốn cuộn ngang.

Bất kỳ ý tưởng nào?

Answer 1

Hãy xem tài sản white-space, được sử dụng như sau:

th { 
    white-space: nowrap; 
} 

Điều này sẽ buộc nội dung của <th> hiển thị trên một dòng.

Từ trang liên kết, đây là những tùy chọn khác nhau cho white-space:

bình thường
Giá trị này chỉ đạo các đại lý dùng để sụp đổ chuỗi khoảng trắng, và phá vỡ đường dây khi cần thiết để điền vào hộp dòng.

trước
Giá trị này ngăn cản các tác nhân người dùng thu hẹp chuỗi không gian trắng. Các dòng chỉ bị phá vỡ ở các ký tự dòng mới được bảo tồn.

nowrap
Giá trị này thu gọn khoảng trắng thành 'bình thường', nhưng ngăn chặn ngắt dòng trong văn bản.

được bọc trước
Giá trị này ngăn cản các tác nhân người dùng thu hẹp chuỗi không gian trắng. Các dòng bị phá vỡ ở các ký tự dòng mới được lưu giữ và khi cần thiết để điền vào các hộp dòng.

trước dòng
Giá trị này chỉ đạo tác nhân người dùng thu gọn trình tự khoảng trắng. Các dòng bị phá vỡ ở các ký tự dòng mới được lưu giữ và khi cần thiết để điền vào các hộp dòng.

Answer 2

Có ít nhất hai cách để làm điều đó:

Sử dụng nowrap thuộc tính bên trong "td" tag:

<th nowrap="nowrap">Really long column heading</th> 

Sử dụng không gian không vỡ giữa các từ của bạn:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th> 

Answer 3

<th nowrap="nowrap"> 

hoặc

<th style="white-space:nowrap;"> 

hoặc

<th class="nowrap"> 
<style type="text/css"> 
.nowrap { white-space: nowrap; } 
</style> 

Answer 4

tôi đến câu hỏi này cần phải ngăn chặn gói văn bản ở gạch nối.

Đây là cách tôi đã làm nó:

<td><nobr>Table Text</nobr></td> 

tham khảo:

How to prevent line break at hyphens on all browsers