Bagaimana mencegah line-break dalam kolom sel tabel (bukan sel tunggal)?

170

Bagaimana saya bisa mencegah jeda baris otomatis dalam kolom tabel (bukan sel tunggal)?

html css layout Steven
sumber
1
Silakan pilih jawaban! ... kurasa sudah terlambat sekarang
Jaeeun Lee

Jawaban:

258

Anda dapat menggunakan ruang putih gaya CSS:

white-space: nowrap;
David M.
sumber
4
Saya ingin mencegah jeda baris dalam kolom tabel, bukan sel tunggal.
Steven
11
Jadi, tambahkan ke setiap sel di kolom?
David M
Tambahkan kelas ke setiap sel td Anda ingin ini diterapkan, jika Anda tidak ingin diterapkan ke setiap sel dalam tabel, tetapi hanya yang spesifik.
James Black
Saya ingin menerapkannya ke semua sel di kolom yang sama.
Steven
7
Anda dapat menerapkan aturan ini bersama dengan pemilih anak ke-css-tricks.com/how-nth-child-works
Zach Lysobey
36

Demi penyelesaian:

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

Digunakan untuk menerapkan gaya ke 2 kolom the table_idtabel.

Ini didukung oleh semua Browser utama, IE mulai mendukung ini dari IE9 dan seterusnya.

estani
sumber
19

Gunakan gaya nowrap:

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

Itu CSS!

Derek Illchuk
sumber
Saya ingin mencegah line-break di semua sel di kolom yang sama.
Steven
18

Cukup tambahkan

style="white-space:nowrap;"

Contoh:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
Harun Atau Rashid
sumber
Bukankah ini berlaku untuk seluruh tabel (yaitu SEMUA kolom) dan bukan hanya kolom individual?
Joshua Pinter
15

Ada beberapa cara untuk melakukan ini; tidak satu pun dari mereka yang mudah, cara yang jelas.

Menerapkan ruang putih: nowrap ke <col>tidak akan berfungsi; hanya empat properti CSS yang berfungsi pada <col>elemen - warna latar, lebar, batas, dan visibilitas. IE7 dan sebelumnya digunakan untuk mendukung semua properti, tetapi itu karena mereka menggunakan model tabel yang aneh. IE8 sekarang cocok dengan yang lainnya.

Jadi, bagaimana Anda menyelesaikan ini?

Nah, jika Anda dapat mengabaikan IE (termasuk IE8), Anda dapat menggunakan :nth-child()pseudoclass untuk memilih <td>s tertentu dari setiap baris. Anda akan menggunakan td:nth-child(2) { white-space:nowrap; }. (Ini berfungsi untuk contoh ini, tetapi akan pecah jika Anda memiliki rowspans atau colspans yang terlibat.)

Jika Anda harus mendukung IE, maka Anda harus pergi jauh dan menerapkan kelas untuk setiap <td>yang ingin Anda pengaruhi. Itu menyebalkan, tapi mereka yang istirahat.

Dalam jangka panjang, ada proposal untuk memperbaiki kekurangan ini di CSS, sehingga Anda bisa lebih mudah menerapkan gaya ke semua sel dalam kolom. Anda akan dapat melakukan sesuatu seperti td:nth-col(2) { white-space:nowrap; }itu dan itu akan melakukan apa yang Anda inginkan.

Xanthir
sumber
13 
<td style="white-space: nowrap">

The nowrapatribut saya percaya sudah ditinggalkan. Di atas adalah cara yang disukai.

Dan Breen
sumber
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>

Ini adalah contoh penggunaan properti white space dengan nilai nowrap, bluetable adalah kelas dari tabel, di bawah tabel adalah gaya CSS.

Matovu Ronald
sumber
5

Letakkan spasi tanpa putus di teks Anda, bukan spasi normal. Di Ubuntu saya melakukan ini dengan (Compose Key) -space-space.

Roger Keays
sumber
5

Untuk menerapkannya ke seluruh tabel, Anda dapat menempatkannya di dalam tabletag:

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

OlgaMaciaszek
sumber