Dashboard Table

By Kevin Ball

table dashboard data

How do I use This?

A simple table layout for displaying status and content. This table is not responsive, but is intended for large-screen data dashboards.

HTML

<table class="dashboard-table">
  <colgroup>
    <col width="150">
    <col width="80">
    <col width="200">
    <col width="60">
    <col width="220">
    <col width="170">
  </colgroup>
  <thead>
    <tr>
      <th><a href="#">Column 1 <i class="fa fa-caret-down"></i></a></th>
      <th><a href="#">Column 2 <i class="fa fa-caret-down"></i></a></th>
      <th><a href="#">Column 3 <i class="fa fa-caret-down"></i></a></th>
      <th><a href="#">Column 4 <i class="fa fa-caret-down"></i></a></th>
      <th><a href="#">Column 5 <i class="fa fa-caret-down"></i></a></th>
      <th><a href="#">Column 6 <i class="fa fa-caret-down"></i></a></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
    <tr>
      <td>
        <div class="flex-container align-justify align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/50/50/people/">
          </div>
          <div class="flex-child-grow">
            <h6 class="dashboard-table-text">A Person</h6>
            <span class="dashboard-table-timestamp">03/04/2017</span>
          </div>
        </div>
      </td>
      <td>Single Line</td>
      <td class="bold">A Bold Line</td>
      <td>A Date</td>
      <td>
        <div class="flex-container align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/50/50/people/">
          </div>
          <div class="flex-child">
            <h6 class="dashboard-table-text">Another person did something</h6>
            <span class="dashboard-table-timestamp">03/08/2017</span>
          </div>
        </div>
      </td>
      <td class="listing-inquiry-status">
      
        <div class="flex-container align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/25/25/abstract/">
          </div>
          <div class="flex-child">
            <h6 class="dashboard-table-text"><a href="#">A longer wrapping item with an image that is aligned to the top</a></h6>
          </div>
        </div>
      
      </td>
    </tr>
    <tr>
      <td>
        <div class="flex-container align-justify align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/50/50/people/">
          </div>
          <div class="flex-child-grow">
            <h6 class="dashboard-table-text">A Person</h6>
            <span class="dashboard-table-timestamp">03/04/2017</span>
          </div>
        </div>
      </td>
      <td>Single Line</td>
      <td class="bold">A Bold Line</td>
      <td>A Date</td>
      <td>
        <div class="flex-container align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/50/50/people/">
          </div>
          <div class="flex-child">
            <h6 class="dashboard-table-text">Another person did something</h6>
            <span class="dashboard-table-timestamp">03/08/2017</span>
          </div>
        </div>
      </td>
      <td class="listing-inquiry-status">
      
        <div class="flex-container align-top">
          <div class="flex-child-shrink">
            <img class="dashboard-table-image" src="https://lorempixel.com/25/25/abstract/">
          </div>
          <div class="flex-child">
            <h6 class="dashboard-table-text"><a href="#">A longer wrapping item with an image that is aligned to the top</a></h6>
          </div>
        </div>
      
      </td>
    </tr>
  </tbody>
</table>

.dashboard-table {
  border-collapse: collapse;
  margin-bottom: 0;

  td {
    border-bottom: 1px dashed lighten($medium-gray, 5%);
  }

  a {
    color: darken($dark-gray, 40%);
  }

  .bold {
    color: $black;
    font-weight: 600;
  }

  thead {
    background: none;
    border: 0;
    border-bottom: 1px solid $light-gray;
    color: $dark-gray;
    font-size: 0.8rem;
  }

  thead a {
    color: $dark-gray;
  }

  tbody {
    border: 1px solid darken($light-gray, 2%);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);

    tr {
      transition: all 0.5s ease;

      &:hover {
        background: #fcf7da;
        transition: all 0.5s ease;
      }
      &:nth-child(even) {
        background: none;
      }
    }
  }
  tr:last-child td {
    border-bottom: 0;
  }
}

.dashboard-table-text {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.dashboard-table-timestamp {
  color: darken($light-gray, 30%);
  font-size: 0.9rem;
  font-weight: 400;
}

.dashboard-table-image {
  display: inline;
  margin-right: 1rem;
  margin-top: 0.6rem;
  max-width: none;
}

.dashboard-table {
  border-collapse: collapse;
  margin-bottom: 0;
}

.dashboard-table td {
  border-bottom: 1px dashed #d7d7d7;
}

.dashboard-table a {
  color: #242424;
}

.dashboard-table .bold {
  color: #0a0a0a;
  font-weight: 600;
}

.dashboard-table thead {
  background: none;
  border: 0;
  border-bottom: 1px solid #e6e6e6;
  color: #8a8a8a;
  font-size: 0.8rem;
}

.dashboard-table thead a {
  color: #8a8a8a;
}

.dashboard-table tbody {
  border: 1px solid #e1e1e1;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}

.dashboard-table tbody tr {
  transition: all 0.5s ease;
}

.dashboard-table tbody tr:hover {
  background: #fcf7da;
  transition: all 0.5s ease;
}

.dashboard-table tbody tr:nth-child(even) {
  background: none;
}

.dashboard-table tr:last-child td {
  border-bottom: 0;
}

.dashboard-table-text {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.dashboard-table-timestamp {
  color: #9a9a9a;
  font-size: 0.9rem;
  font-weight: 400;
}

.dashboard-table-image {
  display: inline;
  margin-right: 1rem;
  margin-top: 0.6rem;
  max-width: none;
}

Dashboard Table

By Kevin Ball

CSS Grid - Holy Grail Layout

Marketing Site Content Section

Todo List Card

Dashboard Table

By Kevin Ball

Similar Building Blocks

CSS Grid - Holy Grail Layout

Marketing Site Content Section

Todo List Card