Mengapa overflow: hidden tidak berfungsi di <td>?

146

Saya punya sel tabel yang saya selalu ingin menjadi lebar tertentu. Namun, itu tidak berfungsi dengan string besar dari teks yang tidak ditempatkan. Berikut ini adalah test case:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Luaskan cuplikan

Bagaimana cara saya membuat teks terpotong di tepi kotak, alih-alih membiarkan kotaknya melebar?

html css

— mike
sumber

205

Ini masalah yang sama .

Anda perlu mengatur table-layout:fixed dan lebar yang sesuai pada elemen tabel, serta overflow:hiddendan white-space: nowrappada sel tabel.

Contohnya

Memperbaiki kolom lebar

Lebar tabel harus sama (atau lebih kecil) dari sel lebar tetap.

Dengan satu kolom lebar tetap:

Tampilkan cuplikan kode

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Luaskan cuplikan

Dengan beberapa kolom lebar tetap:

Tampilkan cuplikan kode

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Luaskan cuplikan

Memperbaiki dan lebar kolom cairan

Lebar untuk tabel harus diatur , tetapi setiap lebar tambahan hanya diambil oleh sel cairan.

Dengan beberapa kolom, lebar tetap dan lebar fluida:

Tampilkan cuplikan kode

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Luaskan cuplikan

— misterManSam
sumber

21

Seperti itulah TD. Saya percaya ini mungkin karena properti 'tampilan' elemen TD secara inheren diatur ke 'tabel-sel' daripada 'blok'.

Dalam kasus Anda, alternatifnya mungkin untuk membungkus isi TD dalam DIV dan menerapkan lebar dan melimpah ke DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Mungkin ada beberapa masalah padding atau cellpadding yang harus dihadapi, dan Anda lebih baik menghapus style inline dan menggunakan css eksternal sebagai gantinya, tetapi ini harus menjadi awal.

— Andy Ford
sumber

Ini berfungsi, tapi saya kehilangan vertical-align:middledan bahkan menambahkannya ke DIV tidak memperbaiki masalah.

— Michael

10

Terapkan CSS table-layout:fixed;(dan kadang-kadang width:<any px or %>) ke TABEL dan white-space: nowrap; overflow: hidden;gaya di TD. Kemudian mengatur lebar CSS pada yang benar sel atau kolom elemen.

Secara signifikan, lebar kolom tabel tata letak tetap ditentukan oleh lebar sel di baris pertama tabel. Jika ada elemen TH di baris pertama, dan lebar diterapkan ke TD (dan bukan TH), maka lebar hanya berlaku untuk konten TD (white-space dan overflow mungkin diabaikan); kolom tabel akan didistribusikan secara merata terlepas dari lebar TD yang ditetapkan (karena tidak ada lebar yang ditentukan [pada TH di baris pertama]) dan kolom akan [dihitung] sama dengan lebar; tabel tidak akan menghitung ulang lebar kolom berdasarkan lebar TD di baris berikutnya. Atur lebar pada elemen sel pertama yang akan ditemui tabel.

Cara lainnya, dan cara teraman untuk mengatur lebar kolom adalah dengan menggunakan <COLGROUP>dan memberi <COL>tag pada tabel dengan lebar CSS diatur pada setiap COL lebar tetap. CSS terkait sel memainkan lebih baik ketika tabel mengetahui lebar kolom di muka.

— szozz
sumber

7

Saya tidak terbiasa dengan masalah spesifik, tetapi Anda dapat menempel div, dll di dalam td dan mengatur overflow itu.

— Oli
sumber

5

Nah di sini ada solusi untuk Anda, tetapi saya tidak begitu mengerti mengapa ini berhasil:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

Yaitu, membungkus isi sel dalam div.

— cletus
sumber

Ini dapat ditingkatkan lebih lanjut seperti yang ditunjukkan di sini - khususnya, overflow:hiddendapat dihapus dari td, dan lebar divdapat diatur ke 100% sehingga berfungsi dengan tdlebar apa pun (termasuk yang berukuran otomatis!)

— Roman Starkov

4

Solusi terbaik adalah dengan memasukkan div ke dalam sel tabel dengan lebar nol. Sel tabel Tbody akan mewarisi lebarnya dari lebar yang didefinisikan thead. Posisi: margin relatif dan negatif seharusnya berhasil!

Berikut adalah tangkapan layar: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

— Gyula Surmann
sumber

Anda harus menggunakan span dan div, tentu saja dengan memiliki pengaturan blok yang tepat untuk span yang dinyatakan dalam css. Seperti yang saya tahu, td harus mengandung div juga.

— Gyula Surmann

3

Anda harus mengatur atribut style tabel: widthdan table-layout: fixed;membiarkan 'overflow: hidden;' atribut berfungsi dengan baik.

Jika ini bekerja lebih baik daripada menggunakan divs dengan widthatribut style, terutama ketika menggunakannya untuk perhitungan ukuran dinamis, tabel akan memiliki DOM yang lebih sederhana yang membuat manipulasi lebih mudah karena koreksi untuk bantalan dan margin tidak diperlukan

Sebagai tambahan, Anda tidak harus mengatur lebar untuk semua sel tetapi hanya untuk sel di baris pertama.

Seperti ini:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

— Wilko Gesink
sumber

2

Saya baru saja mengalami masalah yang sama, dan harus menggunakan bagian <div>dalam <td>pada awalnya (solusi John MacIntyre tidak bekerja untuk saya karena berbagai alasan).

Perhatikan bahwa <td><div>...</div></td>itu bukan penempatan yang valid untuk div jadi alih-alih saya menggunakan set <span>dengan display:block;. Ini memvalidasi baik-baik saja sekarang dan berfungsi.

— Hanya Pengembangan
sumber

1

Solusi termudah dan paling sederhana yang berfungsi:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

— Armin
sumber

0

untuk membuat lebih sederhana, saya mengusulkan untuk meletakkan textarea di dalam td yang dikelola secara otomatis overflow

<td><textarea autofocus>$post_title</textarea></td>

harus diperbaiki

— Gilles Blanchard
sumber

0

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

menampilkan 123456

— Francesco Ruffo de Bonneval
sumber