Skip to content

Add better responsive table options #103

@sebnitu

Description

@sebnitu

This is something I've already added to the BaseWeb docs. It should be added to core. Here's the example on a rowed table:

@include media-max('small') {
  .table-social {
    tr, th, td {
      display: block;
    }

    tr {
      padding: map-get($tables, 'padding');
      border-bottom: map-get($tables, 'border');

      &:first-child {
        border-top: map-get($tables, 'border');
      }
    }

    tr {
      th,
      td {
        padding: 0.5rem 0;
        border-bottom: 1px dotted rgba($black, 0.1);
      }
    }
    tr {
      th:last-child,
      td:last-child {
        border-bottom: 0 none;
      }
    }

    tbody:first-child tr:first-child {
      th,
      td {
        border-top: 0 none;
      }
    }
  }
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions