Bir tablo hücresinin bir sütununda (tek bir hücre değil) satır sonunu nasıl önleyebilirim?

170

Tablo sütununda otomatik satır sonlarını nasıl önleyebilirim (tek bir hücre değil)?

html css layout

— Steven
kaynak

1

Lütfen bir cevap seçin! ... sanırım çok geç

— Jaeeun Lee

258

CSS stili beyaz boşluğu kullanabilirsiniz:

white-space: nowrap;

— David M
kaynak

4

Tek bir hücre değil, bir tablonun sütununda satır sonunu önlemek istiyorum.

— Steven

11

Sütundaki her hücreye eklensin mi?

— David M

Tablodaki her hücreye değil, yalnızca belirli hücrelere uygulanmasını istemiyorsanız, bunun uygulanmasını istediğiniz her td hücresine bir sınıf ekleyin.

— James Black

Aynı sütundaki tüm hücrelere uygulamak istiyorum.

— Steven

7

Bu kuralı n'inci çocuk seçici ile birlikte uygulayabilirsiniz css-tricks.com/how-nth-child-works

— Zach Lysobey

36

Tamamlama uğruna:

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

the table_idTablonun 2 sütununa stil uygulamak için kullanılır .

Bu, tüm büyük Tarayıcılar tarafından desteklenir, IE bunu IE9'dan itibaren desteklemeye başladı.

— estani
kaynak

19

Nowrap stilini kullanın:

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

CSS!

— Derek Illchuk
kaynak

Aynı sütunun tüm hücrelerinde satır sonunu önlemek istiyorum.

— Steven

19

Sadece ekle

style="white-space:nowrap;"

Misal:

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

— Harun Veya Rashid
kaynak

Bu yalnızca tek bir sütun için değil , tüm tablo (yani TÜM sütunlar) için geçerli olmaz mı?

— Joshua Pinter

15

Bunu yapmanın birkaç yolu var; hiçbiri kolay ve bariz bir yol değildir.

Beyaz boşluk uygulama: nowrap bir <col>işe yaramaz; yalnızca dört CSS özelliği <col>öğeler üzerinde çalışır - arka plan rengi, genişlik, kenarlık ve görünürlük. IE7 ve önceki sürümler tüm özellikleri desteklemek için kullanılır, ancak bunun nedeni garip bir tablo modeli kullanmalarıdır. IE8 artık herkesle eşleşiyor.

Peki, bunu nasıl çözersin?

IE'yi (IE8 dahil) göz ardı edebiliyorsanız , her satırdan :nth-child()belirli <td>s'yi seçmek için sözde sınıfı kullanabilirsiniz . Kullanırdın td:nth-child(2) { white-space:nowrap; }. (Bu, bu örnek için geçerlidir, ancak herhangi bir satır aralığı veya colspansınız varsa kırılır.)

IE'yi desteklemeniz gerekiyorsa, uzun yoldan gitmeli ve <td>etkilemek istediğiniz her birine bir sınıf uygulamalısınız . Berbat ama onlar molalar.

Uzun vadede, CSS'deki bu eksikliği gidermek için öneriler var, böylece bir sütundaki tüm hücrelere stilleri daha kolay uygulayabilirsiniz. Böyle bir şey yapabileceksiniz td:nth-col(2) { white-space:nowrap; }ve istediğinizi de yapacaksınız.

— Xanthir
kaynak

13

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

nowrapİnanıyorum nitelik kullanımdan kaldırıldı. Yukarıdaki tercih edilen yoldur.

— Dan Breen
kaynak

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>

Bu, nowrap değerine sahip beyaz boşluk özelliğinin bir kullanım örneğidir, bluetable tablonun sınıfıdır, tablonun altında CSS stilleri vardır.

— Matovu Ronald
kaynak

5

Metninize normal boşluklar yerine kırılmaz boşluklar koyun. Ubuntu'da bunu (Compose Key) -space-space ile yapıyorum.

— Roger Keays
kaynak

5

Tabloyu tüm tabloya uygulamak için tableetiketin içine yerleştirebilirsiniz :

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

— OlgaMaciaszek
kaynak