MySwitzerland Frontend Prototype
Components Pages
Styleguide Navigation

Table Layout

Updates

  • 2019-12-11 SCTO-172: Fixed sizes. (markup, styles) [ybe]

Examples

  1. Will reset in Mobile Portrait
  2. Will reset in Mobile, no gap (below)
  3. Cell with minimum width, no gutter
  4. Autobreak reset, top aligned
  5. Autobreak reset, even
  6. Even width Table, top aligned
  7. Fixed size: 20/80
  8. Fixed size: 25/75
  9. Fixed size: 33/66
  10. Fixed size: 66/33
  11. Fixed size: 75/25
  12. Fixed size: 80/20

Will reset in Mobile Portrait

⌛️ Loading Example ...

Will reset in Mobile, no gap (below)

⌛️ Loading Example ...

Cell with minimum width, no gutter

⌛️ Loading Example ...

Autobreak reset, top aligned

Note that we wrap the table layout into a div without padding to allow correct overflow measurement. The usual example holder has quite some padding.
⌛️ Loading Example ...

Autobreak reset, even

⌛️ Loading Example ...

Even width Table, top aligned

⌛️ Loading Example ...

Fixed size: 20/80

⌛️ Loading Example ...

Fixed size: 25/75

⌛️ Loading Example ...

Fixed size: 33/66

⌛️ Loading Example ...

Fixed size: 66/33

⌛️ Loading Example ...

Fixed size: 75/25

⌛️ Loading Example ...

Fixed size: 80/20

⌛️ Loading Example ...