apostrophe/lib/modules/apostrophe-ui/public/css/components/tables.less

The Apostrophe Content Management System.

// ===============================================================
// Tables and Tabular Data in Apostrophe
// ===============================================================
.apos-table
{
  padding: 0 @apos-padding-3;
  .apos-text-small;
  max-width: 100%;
  border-collapse: collapse;
  text-align: left;
  background-color: @apos-lighter;
  @media screen and (max-width: 960px)
  {
    overflow: auto;
		display: block;
  }
}

.apos-manage-table
{
  font-size: 13px;
  @media @apos-breakpoint-desktop-xl { .apos-text-small; }
}

.apos-table table
{
  text-align: left;
  min-width: 900px;
  width: 100%;
}

.apos-table th,
.apos-table td
{
  padding: @apos-padding-1;
  @media @apos-breakpoint-desktop-xl { padding: @apos-padding-2; }
}

.apos-table th,
.apos-table td
{
  max-width: 300px;
  min-width: 25px;
  a
  {
    display: block;
    color: @apos-dark;
    text-decoration: none;
    .apos-transition;
    &:hover { color: @apos-primary; }
  }
}
.apos-table td:first-child //check-box input
{
  width: 21px;
}

// The Head ===================================
.apos-table thead
{
  border-bottom: 1px solid @apos-dark;

  tr{ background-color: @apos-lighter; }
}


// The Body ===================================
.apos-table tbody tr:nth-child(2n+1){ background-color: @apos-white; }
.apos-table tbody tr:nth-child(2n){ background-color: @apos-lighter; }


// Checkboxes ===================================

.apos-table .apos-field-input-checkbox-indicator
{
  margin-left: 2px;
}