4_responsiveTable.styl

@require "./2_variables"
// Responsive Table
+screenOnlyAnd($medium-and-down)
  table.responsive-table
    width: 100%
    border-collapse: collapse
    border-spacing: 0
    display: block
    position: relative
    td:empty:before
      content: '\00a0'
    th,
      td
      margin: 0
      vertical-align: top
    th
      text-align: left
    thead
      display: block
      float: left
      tr
        display: block
        padding: 0 10px 0 0
        th::before
          content: "\00a0"
    tbody
      display: block
      width: auto
      position: relative
      overflow-x: auto
      white-space: nowrap
      tr
        display: inline-block
        vertical-align: top
    th
      display: block
      text-align: right
    td
      display: block
      min-height: 1.25em
      text-align: left
    tr
      padding: 0 10px
    /* sort out borders */
    thead
      border: 0
      border-right: 1px solid $table-border-color
    &.bordered
      th
        border-bottom: 0
        border-left: 0
      td
        border-left: 0
        border-right: 0
        border-bottom: 0
      tr
        border: 0
      tbody tr
        border-right: 1px solid $table-border-color