bagaimana mendukung ukuran kolom yang sama saat ukuran layar berkurang dalam tabel material sudut
Saya memiliki tabel material di mana saya menggunakan 9 kolom, saya ingin mempertahankan ukuran kolom yang sama meskipun layarnya berkurang.
Saat ini, Ketika saya mengurangi layar saya, kolom terakhir adalah shirking pertama yang terlihat agak aneh karena grup lain masih memiliki ukuran yang sama.
Apakah tetap ada kami yang dapat mendukung ukuran kolom yang sama untuk "jumlah penyelesaian total" bahkan ukuran layar berkurang?
Di bawah ini adalah stackblitz saya
https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts
Gambar Diperbarui
Jawaban
Terima kasih telah menjelaskan masalah Anda atas permintaan saya. untuk perilaku ini saya akan menyarankan Anda untuk menggunakan min-widht
dan max-widht
membuat table
sel Anda terlihat serupa di setiap layar, silakan gunakan CSS di bawah ini di stackblitz Anda
th.mat-header-cell,
td.mat-cell {
text-align: center;
border: 1px solid #ccc;
padding: 0 !important;
min-width: 100px;
max-width: 100px;
}
Juga jika Anda ingin membuat sel pertama terlihat lebih kecil karena itu adalah nomor seri jadi ubah min-width
dan max-width
gunakanfirst-child
th.mat-header-cell:first-child,
td.mat-cell:first-child{
min-width: 50px;
max-width: 50px;
}
Untuk mengubah hanya " jumlah penyelesaian total " seperti yang Anda sebutkan dalam pertanyaan Anda, gunakan beberapa KELAS pada sel tersebut ( th td
) dan beri gaya seperti di atas
.similar-cell-width{
min-width: 100px;
max-width: 100px;
width: 100px; /*solution as per your req it fix the table cell widht*/
}