Responsive Bootstrap Table

Tips and Tricks
1

To change this

image
image764×201 3.84 KB

To this for smaller screens

image
image482×736 6.99 KB

Add these style rules:

@media all and (max-width: 575px) {
  thead {
    display: none;
  }
  td {
    display: grid;
    grid-template-columns: 12ch auto;

    &:first-child {
      margin-top: 1rem;
    }
    &:last-child {
      margin-bottom: 1rem;
    }
  }

  /* Row Headings */
  #f1Drivers {
    td {
      &::before {
        display: inline;
        font-weight: bold;
      }
      &:nth-child(1)::before {
        content: "Racing #";
      }
      &:nth-child(2)::before {
        content: "First Name: ";
      }
      &:nth-child(3)::before {
        content: "Last Name: ";
      }
      &:nth-child(4)::before {
        content: "Nationality: ";
      }
      &:nth-child(5)::before {
        content: "DOB: ";
      }
    }
  }
}

Where f1Drivers is the ID given to the <table> element for specificity.

Note: This is nested CSS as supported by all major browsers. As of Wappler v7, this will also be supported in Wappler's Design view.

11 Likes
2

Thanks Ben. That could prove incredibly useful.

3 Likes
3

Thank you brother!!

You always have an ace/tip/trick up your sleeve
:wink:

2 Likes
4

Bookmarked! Nice one, Ben. Thank you!

1 Like
5

It's the first time I see column names hard-coded in CSS. Caution is advised if you have multiple tables, as it seems to be applied to all tables.

3 Likes
8

Thank you, I have adjusted the CSS to specify the table.

2 Likes
9

Will be in Wappler 7 as we use there the latest Chrome rendering engine

2 Likes