Bagaimana mencegah teks dalam sel tabel dari pembungkus

285

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?

html css pkaeding
sumber

Jawaban:

485

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.

Owen
sumber
8
tidak bekerja untuk bidang input dan tombol di sel yang sama. tempat secara acak di bawah ini.
Doomsknight
16
Tableelemen harus ada table-layout:fixed;agar ini berfungsi.
daniloquio
@Doomsknight Apakah Anda menemukan cara untuk mencapainya dengan bidang input dan elemen lain di sel yang sama?
loveNoHate
white-space: pre; adalah apa yang saya butuhkan ketika -28,04 membungkus antara - dan 28,04
Brent
1
@Doomsknight Saya memiliki masalah yang sama dengan kotak centang dan mengatasinya dengan memperbarui CSS denganinput { display: inline; }
Programster
66 
<th nowrap="nowrap">

atau

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

atau

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>
Grant Wagner
sumber
6
Catatan yang nowrapsudah usang. w3.org/TR/html401/struct/tables.html#h-11.2.6 . Gunakan style sheet sebagai gantinya.
wisbucky
Catatan. jika digunakan secara sembarangan, atribut ini dapat menghasilkan sel yang terlalu lebar.
ArifMustafa
1
@wisbucky Bagaimana cara "menggunakan style sheet"?
rogerdpack
22

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>
Sergey Golovchenko
sumber
6
Catatan yang nowrapsudah usang. w3.org/TR/html401/struct/tables.html#h-11.2.6 . Gunakan style sheet sebagai gantinya.
wisbucky
6

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

cssyphus
sumber
Patut dicatat bahwa nobrtag ini tidak standar, seperti yang ditunjukkan dalam jawaban yang diterima yang terhubung dalam jawaban ini: stackoverflow.com/a/8755071/4257
pkaeding
Benar sekali. Poin Anda diterima dengan baik. Saya membaca semua komentar itu, mencatat pengalaman para komentator yang sesuai, dan membuat penilaian. Tanda hubung agak sulit. (Catatan: pertanyaan yang Anda tautkan dalam komentar Anda adalah sama dengan yang saya
tautkan
Ya, itu dimaksudkan untuk pertanyaan yang sama. Saya hanya ingin memastikan peringatan telah diposting di sini jika seseorang menemukan jawaban ini di masa depan, dan tidak repot-repot membaca referensi terkait.
pkaeding
1

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'}}>
Davis Jones
sumber