Inilah cara saya mengatasi beberapa masalah CSS Stylesheet max-width: 100% yang tidak berfungsi di beberapa browser seperti google chrome, mozilla firefox, internet explorer, opera, safari, dsb. dengan berbagai macam penyebab.

Dalam kasus ini, permasalahan CSS Stylesheet max-width: 100% untuk table yang tidak berfungsi dibeberapa browser seperti mozilla firefox, internet explorer, safari, maupun google chrome telah saya jumpai dan ternyata masing-masing permasalahan memiliki dengan berbagai macam penyebab yang berbeda-beda, diantaranya;

Masalah css style max-width: 100% table

Pertama, CSS Style max-width: 100% table tidak berfungsi di browser mozilla firefox dan internet explorer ketika table berisi gambar berukuran lebih besar daripada lebar elemen.

Kedua, CSS Style max-width: 100%; tidak berfungsi di seluruh browser (google chrome, opera, safari, internet, explorer, mozilla firefox, dkk.) ketika teks di dalam table tidak berspasi seperti input url/link atau seperti contoh kasus yang saya alami pada halaman posting berikut; Blogger JSON Feed Api.

Solusi permasalahan css style max-width: 100% table

Dengan terjadinya permasalahan yang saya hadapi sebagaimana dipaparkan di atas, maka saya mencoba untuk mencari solusi untuk permasalahan tersebut, sehingga menghasilkan solusi berikut;

Solusi permasalahan pertama;

Browser mozilla firefox dan internet explorer tidak menyambut dengan baik style css max-width: 100%, entah itu untuk gambar itu sendiri maupun untuk tablenya. Sehingga, untuk mengatasi hal ini, terutama agar gambar dapat terlihat utuh oleh pengunjung dan menyesuaikan lebar elemen divisi atau sejenisnya, kita dapat menambahkan style width: 100%;. Dengan begitu, maka ukuran gambar yang lebar tidak melebihi batas dan tentunya dapat terlihat utuh tanpa terpotong maupun menutupi elemen layout blog lainnya, seperti sidebar dan sejenisnya.

Contoh:

table img {
  width: 100%;
}

Kode CSS style di atas berarti memberikan perintah untuk gambar di dalam table agar berukuran penuh. Jadi, gambar berukuran besar dan kecil di dalam table akan menghasilkan ukuran lebar penuh (tidak kurang, dan tidak lebih)

Solusi permasalahan kedua;

Untuk permasalahan kedua ini cukup melelahkan otak, karena dari berbagai situs tutorial blogging, khususnya tutorial CSS Style, yang saya temui dari mesin penelusur google maupun bing tidak ada yang cocok dan sesuai apalagi hingga menyelesaikan masalah tersebut. Mungkin juga karena kata kunci yang saya gunakan kurang tepat.

Namun, belum lama sebelum tulisan ini dibuat, saya mendapatkan ide gambaran untuk mengatasinya, yaitu menggunakan word-break yang terlintas ketika saya hendak menginput word-wrap: break-word untuk elemen divisi lain. Tanpa pikir panjang, tab baru terbuka, word-wrap terketik, halaman w3schools.com menjadi pendaratan akhir, dan menghasilkan kesimpulan sebagai berikut;

word-wrap: break-word; tidak berfungsi sesuai harapan
word-break: keep-all; tidak sesuai harapan juga
word-break: break-all; berhasil, max-width: 100% berfungsi sesuai harapan saya..

Contoh:

table {
  max-width: 100%;
}
table td {
  word-break: break-all;
}

Untuk penjelasan penggunaan word-wrap dan word-break, silakan kunjungi halaman berikut http://www.w3schools.com/cssref/css3_pr_word-break.asp