Paksa lebar kolom tabel untuk selalu diperbaiki apa pun isinya

Saya memiliki tabel html dengan table-layout: fixeddan td dengan lebar yang ditetapkan. Kolom masih diperluas untuk menampung konten teks yang tidak mengandung spasi. Apakah ada cara untuk memperbaikinya selain membungkus konten setiap td dalam sebuah div?

Contoh: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

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

Dalam contoh, Anda dapat melihat bahwa kolom dengan AAAAAAAAAAAA ... mengembang meskipun secara eksplisit disetel ke lebar 50px.

Tentukan lebar tabel:

table
{
    table-layout: fixed;
    width: 100px;
}

Lihat jsFiddle

Coba lihat CSS berikut:

word-wrap:break-word;

Browser web tidak boleh memecah "kata-kata" secara default sehingga yang Anda alami adalah perilaku normal browser. Namun Anda dapat menggantinya dengan perintah CSS word-wrap.

Anda perlu mengatur lebar pada tabel keseluruhan kemudian lebar pada kolom. "lebar: 100%;" juga harus OK tergantung pada kebutuhan Anda.

Menggunakan word-wrap mungkin bukan yang Anda inginkan, namun berguna untuk menampilkan semua data tanpa merusak tata letak.

Buat meja menjadi kokoh SEBELUM css. Gambarkan lebar tabel Anda, lalu gunakan baris 'pengontrol' di mana setiap td memiliki lebar eksplisit, yang semuanya bertambah hingga lebarnya di tag tabel.

Harus melakukan ratusan email html untuk bekerja di mana saja, dengan menggunakan HTML yang benar terlebih dahulu, kemudian gaya w / css akan mengatasi banyak masalah di semua IE, webkit, dan mozilla.

begitu:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Akan membuat tabel dengan lebar 300px. Perhatikan gambar yang lebih besar dari lebarnya secara ekstrem

Anda dapat menambahkan a divke td, lalu mengatur gaya itu. Ini harus bekerja seperti yang Anda harapkan.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Lalu css.

td div { width: 50px; overflow: hidden; }

Anda juga dapat menggunakan "overflow: hidden" atau "overflow-x: hidden" (hanya untuk lebarnya). Ini membutuhkan lebar yang ditentukan (dan / atau tinggi?) Dan mungkin juga "display: block".

"Overflow: Hidden" menyembunyikan seluruh konten, yang tidak sesuai dengan kotak yang ditentukan.

Contoh:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Malu pada saya, saya pernah melihat, Anda sudah menggunakan "overflow". Saya kira itu tidak berhasil, karena Anda tidak menyetel "display: block" ke elemen Anda ...

Saya akan mencoba mengaturnya ke max-width: 50px;

Anda juga bisa menggunakan persentase, dan / atau menentukan di header kolom:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

Bonus dengan persentase adalah pemeliharaan kode yang lebih rendah: Anda dapat mengubah lebar tabel tanpa harus menentukan ulang lebar kolom.

Peringatan: Menurut pemahaman saya, lebar tabel yang ditentukan dalam piksel tidak didukung di HTML 5; Anda perlu menggunakan CSS sebagai gantinya.

Ini berhasil untuk saya

td::after { 
content: ''; 
display: block; 
width: 30px;
}