Anpassung von Tabellen fĂŒr mobile GerĂ€te

FĂŒr wen ist dieser Artikel

Fast alle Designer stehen vor dem Problem der Anpassung beim Rendern von Tabellen in Schnittstellen - nĂ€mlich beim Anpassen von Tabellen fĂŒr mobile GerĂ€te. Es ist auch fair, die NĂŒtzlichkeit des Artikels fĂŒr Frontend-Entwickler zu beachten, die genau diese Tabellen erstellen.





Problem

Das Problem fĂŒr den Designer beginnt in dem Moment, in dem die Tabelle aus der Desktop-Version der BenutzeroberflĂ€che fĂŒr mobile GerĂ€te angepasst ist. Wie wir wissen, können Tabellen viele Spalten haben, was dazu fĂŒhrt, dass Tabellen auf einem mobilen GerĂ€t ĂŒber die Bildschirmbreite hinaus abstĂŒrzen. 





Dieses Problem ist weit verbreitet und kann nur durch den Inhalt der Zelle verschlimmert werden, die nicht zeilenweise umbrochen wird, wodurch die Breite der Spalte erhöht wird.





Datensatz testen

Um die Essenz des Problems besser zu verstehen, werden wir uns einen Tisch ausdenken und ihn anpassen.





SĂ€ulen:





  1. Zimmer





  2. Ein Foto





  3. VollstÀndiger Name





  4. Telefon





  5. Email





  6. das Datum





  7. Textbeschreibung





  8. Status





  9. Aktionen





Das Ergebnis wird eine ziemlich umfangreiche Tabelle sein, die alle Arten von Spalten enthĂ€lt, die wir benötigen. Ehrlich gesagt wirft selbst die obige Liste Fragen fĂŒr mich auf - rechts wird zu viel Platz verschwendet. 





  1. Feste Breite und Zeilenumbruch





  2. Breite zum Inhalt





“ ”.





. , . — , .





— .

































- , .





: , . ( )





, . . .





, . , , . .





-

- , , , , .





- - , - ( ).





, , , ( ).





Wenn Sie Fehler bemerken oder etwas hinzufĂŒgen möchten, lassen Sie es mich wissen, ich werde es auf jeden Fall tun. Vielen Dank fĂŒr Ihre Aufmerksamkeit!








All Articles