Làm thế nào để ngăn văn bản trong một ô bảng

Có ai biết làm thế nào tôi có thể ngăn văn bản trong một ô bảng không? Cái này dành cho tiêu đề của một bảng và tiêu đề dài hơn 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. Không sao nếu cột rất rộng.

HTML của bảng (đơn giản hóa) của tôi 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>

Bản thân tiêu đề được gói trong một div bên trong ththẻ vì lý do liên quan đến javascript trên trang.

Bảng sắp ra với các tiêu đề gói vào 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 cuộn ngang. Trong trường hợp của tôi, mặc dù, tôi muốn cuộn ngang.

Có ý kiến ​​gì không?

Có một cái nhìn vào white-space tài sản, được sử dụng như thế này:

th {
    white-space: nowrap;
}

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

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

bình thường
Giá trị này chỉ đạo các tác nhân người dùng thu gọn các chuỗi khoảng trắng và ngắt các dòng khi cần thiết để điền vào các ô dòng.

trước
Giá trị này ngăn tác nhân người dùng thu gọn các chuỗi khoảng trắng. Các dòng chỉ bị hỏng ở các ký tự dòng mới được bảo tồn.

bây giờ
Giá trị này thu gọn khoảng trắng như đối với 'bình thường', nhưng triệt tiêu ngắt dòng trong văn bản.

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

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

<th nowrap="nowrap">

hoặc là

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

hoặc là

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

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

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

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

Sử dụng khoảng trắng không thể phá vỡ giữa các từ của bạn:

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

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

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

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

Tài liệu tham khảo:

Làm cách nào để ngăn chặn ngắt dòng ở dấu gạch nối trên tất cả các trình duyệt

Để sử dụng với UI React / Material

Trong trường hợp bạn ở đây tự hỏi làm thế nào điều này hoạt động cho UI UI khi xây dựng trong React, đây là cách bạn thêm phần này vào <TableHead>Thành phần của mình :

<TableHead style={{ whiteSpace: 'nowrap'}}>