bagaimana mendukung ukuran kolom yang sama saat ukuran layar berkurang dalam tabel material sudut

Dec 15 2020

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

4 Awais Dec 15 2020 at 12:40

Terima kasih telah menjelaskan masalah Anda atas permintaan saya. untuk perilaku ini saya akan menyarankan Anda untuk menggunakan min-widhtdan max-widhtmembuat tablesel 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-widthdan max-widthgunakanfirst-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*/

 }