Tablo hücresindeki metnin kaydırılmasını önleme

Tablo hücresindeki metnin kaydırılmasını nasıl engelleyebileceğimi bilen var mı? Bu bir tablonun başlığı için, ve başlık altındaki verilerden çok daha uzun, ama sadece bir satırda görüntülemek gerekiyor. Sütun çok genişse sorun değil.

(Basitleştirilmiş) tablomun HTML'si şuna benzer:

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

Başlığın kendisi, thsayfadaki javascript ile ilgili nedenlerden dolayı etiketin içindeki bir div içine sarılır .

Tablo, başlıklar birden çok satıra sarılmış olarak çıkıyor. Bu, tarayıcı yatay kaydırmadan kaçınmaya çalıştığından, yalnızca tablo yeterince geniş olduğunda gerçekleşir. Benim durumumda yatay kaydırma istiyorum.

Herhangi bir fikir?

Şu şekilde white-spacekullanılan mülke bir göz atın :

th {
    white-space: nowrap;
}

Bu, içeriğini <th>bir satırda görüntülenmeye zorlar .

Bağlantılı sayfadan, aşağıdakiler için çeşitli seçenekler şunlardır white-space:

normal
Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya ve satır kutularını doldurmak için gerektiği gibi satırları kesmeye yönlendirir.

pre
Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daralmasını önler. Satırlar yalnızca korunmuş yeni satır karakterlerinde kesilir.

nowrap
Bu değer, 'normal' için olduğu gibi beyaz boşluğu daraltır, ancak metindeki satır sonlarını bastırır.

ön sarma
Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daralmasını önler. Satırlar korunmuş yeni satır karakterlerinde ve gerektiğinde satır kutularını doldurmak için kesilir.

pre-line
Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya yönlendirir. Satırlar korunmuş yeni satır karakterlerinde ve gerektiğinde satır kutularını doldurmak için kesilir.

<th nowrap="nowrap">

veya

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

veya

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

Bunu yapmanın en az iki yolu vardır:

"Td" etiketi içinde nowrap niteliğini kullanın:

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

Kelimeleriniz arasında kırılmaz boşluklar kullanın:

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

Kısa çizgide metin kaydırmayı önlemeye ihtiyaç duyan bu soruya geldim.

Ben böyle yaptım:

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

Referans:

Tüm tarayıcılarda tire işaretlerinde satır kesmeyi önleme

Reaksiyon / Malzeme Kullanıcı Arayüzü ile Kullanım İçin

React'ta inşa ederken bunun Malzeme UI için nasıl çalıştığını merak ediyorsanız, bunu <TableHead>Bileşeninize nasıl ekleyeceğiniz aşağıda açıklanmıştır :

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