Bagaimana mencegah teks dalam sel tabel dari pembungkus

Adakah yang tahu bagaimana saya bisa mencegah pembungkus teks dalam sel tabel? Ini untuk tajuk tabel, dan tajuknya jauh lebih panjang daripada data di bawahnya, tapi saya perlu menampilkannya hanya pada satu baris. Tidak apa-apa jika kolomnya sangat lebar.

HTML tabel saya (disederhanakan) terlihat seperti ini:

<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>

Judulnya sendiri dibungkus dengan div di dalam thtag untuk alasan yang berkaitan dengan javascript pada halaman.

Tabelnya keluar dengan judul yang terbungkus beberapa baris. Ini tampaknya hanya terjadi ketika tabel cukup lebar, karena browser berusaha menghindari pengguliran horizontal. Dalam kasus saya, saya ingin pengguliran horizontal.

Ada ide?

Lihatlah white-spaceproperti, yang digunakan seperti ini:

th {
    white-space: nowrap;
}

Ini akan memaksa konten <th>untuk ditampilkan pada satu baris.

Dari halaman tertaut, berikut adalah berbagai opsi untuk white-space:

normal
Nilai ini mengarahkan agen pengguna untuk menciutkan urutan ruang putih, dan memecah garis yang diperlukan untuk mengisi kotak garis.

pre
Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih. Garis hanya terputus pada karakter baris baru yang dipertahankan.

nowrap
Nilai ini menciutkan spasi sebagai untuk 'normal', tetapi menekan jeda baris dalam teks.

pre-wrap
Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih. Garis terputus pada karakter baris baru yang dipertahankan, dan sebagaimana diperlukan untuk mengisi kotak baris.

pre-line
Nilai ini mengarahkan agen pengguna untuk menciutkan urutan ruang putih. Garis terputus pada karakter baris baru yang dipertahankan, dan sebagaimana diperlukan untuk mengisi kotak baris.

<th nowrap="nowrap">

atau

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

atau

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

Setidaknya ada dua cara untuk melakukannya:

Gunakan atribut nowrap di dalam tag "td":

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

Gunakan spasi yang tidak dapat dipecah antara kata-kata Anda:

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

Saya sampai pada pertanyaan ini perlu untuk mencegah pembungkus teks di tanda hubung.

Beginilah cara saya melakukannya:

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

Referensi:

Cara mencegah line break pada tanda hubung pada semua browser

Untuk Digunakan dengan UI Bereaksi / Material

Jika Anda di sini bertanya-tanya bagaimana ini bekerja untuk Material UI ketika membangun Bereaksi, inilah cara Anda menambahkan ini ke <TableHead>Komponen Anda :

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