Mengatur lebar kolom dengan css

Hi guys, kembali lagi besama alimstudio. Kali ini kita akan belajar bagaimana caranya membuat atau mengatur lebar kolom pada datatable. Pada awalnya alim nemuin masalah ini waktu mau atur lebar table untuk buat inputan texarea untuk setiap table, karena tablenya dinamis jadinya susah banget untuk buat lebar inputannya agak besar, alhasil inputan textareanya kecil bagaikan tak ada ruang bernafas. Karena penasaran akhirnya mulai baca-baca dokumentasi di official datatable dan akhirnya nemu solusinya. langsung aja deh, temen-temen semua bisa nambahin script di bawah pada inline css di tag table, atau meletakkannya di tag style.

table-layout: fixed;
word-wrap: break-word;

Copy script css di atas kemudian sisipkan pada tag table untuk inline seperti berikut:

Atau meletakkannya pada tag style, namun saya sarankan agar menggunakan id atau class dari table yang ingin di ubah. Agar apabila kita punya table lebih dari satu di satu halaman tidak terkena efek dari perubahan ini. Contoh penggunaannya sebagai berikut:

Pengertian dari yang diatas adalah, untuk table yang berwarna merah adalah nama tag yang ingin di beri style, untuk tanda pagar (#) yang berwarna hijau artinya kita menggunakan selector id dari tag table, kemudian untuk table yang berwarna hijau adalah nama id dari tag yang kita panggil.

Mungkin penjelasan diatas agak susah untuk dimengerti, namun kalau temen-temen alim semua mengikuti step-stepnya dengan benar, pasti akan terlihat perubahannya.

Selamat siang pak or bu guru,... saya permisi bertanya,.. bagaimana menyesuaikan teks pada kolom? atau bisa dibuat automatis untuk teks mengikuti lebar kolom yang ada ? contoh sbb:

sebagai contoh untuk kolom mobil, teks di dalam mobil dapat mengikuti lebar kolom,.. namun bagaimana agar semua teks di dalam kolom dapat secara auto mengikuti lebar kolom ? terima kasih atas bantuannya. salam

avatar gopei

@gopei

71 Kontribusi 1 Poin

Dipost: 4 tahun yang lalu Update 2 tahun yang lalu

atau respon: Tidak Jelas Baca aturan main Kode tidak rapi Perbaiki Judul

Tulis Balasan

Jawaban

langsung aja Pake "inline css" Tanggal Staff Mobil kalau mau kecil ya 1% aj hehee.. sesuaikan .. Semoga Membantu (^_^)

avatar ciloxz

@ciloxz

284 Kontribusi 139 Poin

Dipost: 4 tahun yang lalu

belum bisa mas Ciloxz,... knapa ya?

avatar gopei

@gopei

71 Kontribusi 1 Poin

Dipost: 4 tahun yang lalu Update 4 tahun yang lalu

Halo. Kalau table, terlalu tricky dan sukar di css, untuk membuatnya mengikuti lebar kolom, saran saya ganti dengan saja...

avatar tompradana

@tompradana

134 Kontribusi 95 Poin

Dipost: 4 tahun yang lalu

oh gitu,.. thanks for @tompradana your answer boleh di contohin 1 kolom saja dengan menggunakan ? thanks

avatar gopei

@gopei

71 Kontribusi 1 Poin

Dipost: 4 tahun yang lalu

Disitu kan ada 12 kolom. Coba persen width nya diganti mas. Total persenannya nanti harus 100% dari 12 kolom. Contoh : width untuk nomor 5%, tgl 10%, dst. Total persenan keseluruhan adalah 100% mas. Semoga berhasil mas hehe

avatar panjitamzilp

Kasih css ini mas

 
tr td{
   max-width:100%;
white-space:nowrap;
}

Buat percobaan buat aja inline style tarok di atas tag tabel nya ^^

avatar markeronly

@markeronly

378 Kontribusi 230 Poin

Dipost: 4 tahun yang lalu

coba kasih ini

 
table {
    table-layout: fixed;
}
tr td {
    //width: ?;
    white-space: nowrap;
}

Semoga berhasil #pondok_programmer

avatar azam007

@azam007

75 Kontribusi 29 Poin

Dipost: 4 tahun yang lalu Update 4 tahun yang lalu

mas itu kelihatan nya sudah pakai bootstrap bukan? coba panggil table-responsive

No Tanggal Staff Mobil Tgl. Pinjam Tgl. Kembali Tujuan Keperluan Time-Out Tgl Dikembalikan Remark Status No Tanggal Staff Mobil Tgl. Pinjam Tgl. Kembali Tujuan Keperluan Time-Out Tgl Dikembalikan Remark Status No Tanggal Staff Mobil Tgl. Pinjam Tgl. Kembali Tujuan Keperluan Time-Out Tgl Dikembalikan Remark Status

avatar VikSintus

@VikSintus

96 Kontribusi 36 Poin

Dipost: 4 tahun yang lalu

Apa itu width di HTML?

Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.