Làm cách nào để ngăn chặn ngắt dòng trong một cột của một ô của bảng (không phải là một ô)?

170

Làm cách nào tôi có thể ngăn ngắt dòng tự động trong một cột của bảng (không phải là một ô)?

html css layout

— Steven
nguồn

1

Vui lòng chọn một câu trả lời! ... quá muộn bây giờ tôi cho rằng

— Jaeeun Lee 17/12/18

258

Bạn có thể sử dụng khoảng trắng kiểu CSS:

white-space: nowrap;

— David M
nguồn

4

Tôi muốn ngăn chặn ngắt dòng trong một cột của bảng chứ không phải một ô duy nhất.

— Steven

11

Vì vậy, thêm nó vào mỗi ô trong cột?

— David M

Thêm một lớp vào mỗi ô td mà bạn muốn áp dụng, nếu bạn không muốn nó được áp dụng cho mọi ô trong bảng, nhưng chỉ những ô cụ thể.

— James Black

Tôi muốn áp dụng nó cho tất cả các ô của cùng một cột.

— Steven

7

Bạn có thể áp dụng quy tắc này cùng với bộ chọn con thứ n css-tricks.com/how-nth-child-works

— Zach Lysobey

36

Vì lợi ích hoàn thành:

#table_id td:nth-child(2)  {white-space: nowrap;}

Được sử dụng để áp dụng một kiểu cho cột 2 của the table_idbảng.

Điều này được hỗ trợ bởi tất cả các Trình duyệt chính, IE bắt đầu hỗ trợ điều này từ IE9 trở đi.

— estani
nguồn

19

Sử dụng kiểu nowrap:

<td style="white-space:nowrap;">...</td>

Đó là CSS!

— Derek Illchuk
nguồn

Tôi muốn ngăn chặn ngắt dòng trong tất cả các ô của cùng một cột.

— Steven

17

Chỉ cần thêm

style="white-space:nowrap;"

Thí dụ:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

— Harun Hoặc Rashid
nguồn

Điều này sẽ không áp dụng cho toàn bộ bảng (tức là TẤT CẢ các cột) chứ không chỉ một cột riêng lẻ?

— Joshua Pinter

15

Có một số cách để làm điều này; không ai trong số họ là cách dễ dàng, rõ ràng.

Áp dụng khoảng trắng: nowrap cho một <col>công việc sẽ không; chỉ có bốn thuộc tính CSS hoạt động trên <col>các yếu tố - màu nền, chiều rộng, đường viền và khả năng hiển thị. IE7 và trước đó được sử dụng để hỗ trợ tất cả các thuộc tính, nhưng đó là vì họ đã sử dụng một mô hình bảng lạ. IE8 bây giờ phù hợp với những người khác.

Vì vậy, làm thế nào để bạn giải quyết điều này?

Chà, nếu bạn có thể bỏ qua IE (bao gồm IE8), bạn có thể sử dụng :nth-child()pseudoclass để chọn <td>s cụ thể từ mỗi hàng. Bạn sẽ sử dụng td:nth-child(2) { white-space:nowrap; }. (Điều này hoạt động với ví dụ này, nhưng sẽ bị hỏng nếu bạn có bất kỳ hàng nào hoặc colspans liên quan.)

Nếu bạn phải hỗ trợ IE, thì bạn phải đi một chặng đường dài và áp dụng một lớp học cho mọi <td>điều bạn muốn ảnh hưởng. Nó hút, nhưng đó là giờ nghỉ.

Về lâu dài, có những đề xuất để khắc phục sự thiếu hụt CSS này, để bạn có thể dễ dàng áp dụng các kiểu cho tất cả các ô trong một cột. Bạn sẽ có thể làm một cái gì đó như td:nth-col(2) { white-space:nowrap; }và nó sẽ làm những gì bạn muốn.

— Xanthir
nguồn

13

<td style="white-space: nowrap">

Các nowrapthuộc tính tôi tin bị phản đối. Trên đây là cách ưa thích.

— Dan Breen
nguồn

6

<table class="blueTable">
  <tr>
     <td>My name is good</td>
   </tr>
</table> 
<style>   
    table.blueTable td,
    table.blueTable th {
        white-space: nowrap;
        /* non-question related further styling */
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
        text-align: left;
    }
</style>

Đây là một ví dụ sử dụng thuộc tính khoảng trắng có giá trị ngay bây giờ, bluetable là lớp của bảng, bên dưới bảng là các kiểu CSS.

— Matovu Ronald
nguồn

5

Đặt không gian không phá vỡ trong văn bản của bạn thay vì không gian bình thường. Trên Ubuntu tôi làm điều này với (Phím soạn thảo) -space-space.

— Roger Keays
nguồn

5

Để áp dụng nó cho toàn bộ bảng, bạn có thể đặt nó trong tablethẻ:

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

— OlgaMaciaszek
nguồn