Postingan lainnya

"auto width" / automatis lebar teks pada kolom

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:


<div class="table-responsive">
<table class="table table-bordered table-striped table-hover" id="table-datatable">
	<thead class="thead-light">
		<style type="text/css">
			.thead-light{
		background-color: yellow;}
		</style>
	<tr>
		<th>No</th>
		<th>Tanggal</th>
		<th>Staff</th>
		<th>Mobil</th>
		<th>Tgl. Pinjam</th>
		<th>Tgl. Kembali</th>
		<th>Tujuan</th>
		<th>Keperluan</th>
		<th>Time-Out</th>
		<th>Tgl Dikembalikan</th>
		<th>Remark</th>
		<th>Status</th>
	</tr>

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

php

@gopei

71 Kontribusi 1 Poin

Diperbarui 6 tahun yang lalu

8 Jawaban:

langsung aja Pake "inline css"

Tanggal Staff Mobil

kalau mau kecil ya 1% aj hehee..

sesuaikan .. Semoga Membantu (^_^)

@ciloxz

284 Kontribusi 139 Poin

Dipost 6 tahun yang lalu

belum bisa mas Ciloxz,... knapa ya?

<tr>
<th style="width:10%">No</th>
<th style="width:10%">Tanggal</th>
<th style="width:10%">Staff</th>
<th style="width:10%">Mobil</th>
<th style="width:10%">Tgl. Pinjam</th>
<th style="width:10%">Tgl. Kembali</th>
<th style="width:10%">Tujuan</th>
<th style="width:10%">Keperluan</th>
<th style="width:10%">Time-Out</th>
<th style="width:10%">Tgl Dikembalikan</th>
<th style="width:10%">Remark</th>
<th style="width:10%">Status</th>
</tr>

@gopei

71 Kontribusi 1 Poin

Dipost 6 tahun yang lalu

Halo.

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

saja...

@tompradana

134 Kontribusi 95 Poin

Dipost 6 tahun yang lalu

oh gitu,.. thanks for @tompradana your answer

boleh di contohin 1 kolom saja dengan menggunakan

thanks

@gopei

71 Kontribusi 1 Poin

Dipost 6 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

@panjitamzilp

1 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Kasih css ini mas


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

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

@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

coba kasih ini


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

Semoga berhasil

#pondok_programmer

@azam007

75 Kontribusi 29 Poin

Dipost 6 tahun yang lalu

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

 <table class="table table-bordered table-responsive table-hover" >
	<thead style="background-color:yellow">
	<tr>
		<th>No</th>
		<th>Tanggal</th>
		<th>Staff</th>
		<th>Mobil</th>
		<th>Tgl. Pinjam</th>
		<th>Tgl. Kembali</th>
		<th>Tujuan</th>
		<th>Keperluan</th>
		<th>Time-Out</th>
		<th>Tgl Dikembalikan</th>
		<th>Remark</th>
		<th>Status</th>
	</tr>
    </thead>
    </table>

@VikSintus

96 Kontribusi 36 Poin

Dipost 6 tahun yang lalu