Link copied!

Table Examples

<table class="e-table" data-e-version="2">
  <thead>
    <tr>
      <th class="e-table__sort e-table__sort-desc">
        Email Name
      </th>
      <th class="e-table__col e-table__col-large e-table__sort">
        Recipient source
      </th>
      <th class="e-table__col e-table__col-small e-table__sort">
        Status
      </th>
      <th class="e-table__col e-table__col-small">
        Admin
      </th>
      <th class="e-table__col e-table__col-medium">
        Template
      </th>
      <th class="e-table__col e-table__col-xsmall e-table__sort">
        Created By
      </th>
      <th class="e-table__col e-table__col-xsmall e-table__sort">
        Changed On
      </th>
      <th class="e-table__col e-table__col-actions"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Nostrud eu, do velit ex labore ea, ad do nostrud cillum.
      </td>
      <td>
        Et laborum
      </td>
      <td>
        Culpa sit
      </td>
      <td>
        Et fugiat
      </td>
      <td>
        Nostrud aliqua
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Incididunt, deserunt adipiscing nulla, fugiat commodo, tempor, magna in, non officia.
      </td>
      <td>
        Deserunt anim
      </td>
      <td>
        Ipsum est
      </td>
      <td>
        Lorem sunt
      </td>
      <td>
        Tempor dolore
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Do ullamco aute enim sint exercitation tempor ullamco sed, laborum?
      </td>
      <td>
        Excepteur dolor
      </td>
      <td>
        Aliqua dolore
      </td>
      <td>
        Irure et
      </td>
      <td>
        Non est
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Amet aliquip et deserunt irure, dolor velit irure nisi.
      </td>
      <td>
        Minim pariatur
      </td>
      <td>
        Ex excepteur
      </td>
      <td>
        Tempor dolore
      </td>
      <td>
        Esse mollit
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Occaecat dolore commodo fugiat, eiusmod occaecat ipsum, tempor duis do in dolore aute.
      </td>
      <td>
        Aute dolore
      </td>
      <td>
        Exercitation velit
      </td>
      <td>
        Nostrud dolore
      </td>
      <td>
        Amet consectetur
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-overview" data-e-version="2">
  <thead>
    <tr>
      <th class="e-table__sort e-table__sort-desc">
        Email Name
      </th>
      <th class="e-table__col e-table__col-large e-table__sort">
        Recipient Source
      </th>
      <th class="e-table__col e-table__col-small e-table__sort">
        Status
      </th>
      <th class="e-table__col e-table__col-small">
        Admin
      </th>
      <th class="e-table__col e-table__col-medium">
        Template
      </th>
      <th class="e-table__col e-table__col-xsmall e-table__sort">
        Created By
      </th>
      <th class="e-table__col e-table__col-xsmall e-table__sort">
        Changed On
      </th>
      <th class="e-table__col e-table__col-actions"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Esse deserunt tempor deserunt occaecat consequat in, sint, esse quis ipsum exercitation nulla nulla.
      </td>
      <td>
        Tempor id
      </td>
      <td>
        Ut enim
      </td>
      <td>
        Consectetur dolore
      </td>
      <td>
        Esse esse
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        In anim fugiat veniam incididunt laborum nulla ut?
      </td>
      <td>
        Ut et
      </td>
      <td>
        Ipsum anim
      </td>
      <td>
        Ullamco ipsum
      </td>
      <td>
        Anim exercitation
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Deserunt amet mollit, in nisi pariatur ea ullamco.
      </td>
      <td>
        Quis fugiat
      </td>
      <td>
        Cillum fugiat
      </td>
      <td>
        Qui pariatur
      </td>
      <td>
        Do mollit
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Enim ullamco cillum dolor laboris magna deserunt.
      </td>
      <td>
        Duis dolore
      </td>
      <td>
        Officia cupidatat
      </td>
      <td>
        Magna et
      </td>
      <td>
        Ullamco ullamco
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Aliquip, eu, laboris amet incididunt, dolore ut excepteur mollit sunt, eiusmod, id adipiscing.
      </td>
      <td>
        Nisi elit
      </td>
      <td>
        Veniam consectetur
      </td>
      <td>
        Deserunt sit
      </td>
      <td>
        Reprehenderit do
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="8">
        <span class="float-right">
          <e-pagination max-page="8" current-page="1"></e-pagination>
        </span>
        Show&nbsp;
        <e-select class="e-select-inline">
          <e-select-option value="5">
          5
          </e-select-option>
          <e-select-option value="10">
          10
          </e-select-option>
          <e-select-option value="15">
          15
          </e-select-option>
          <e-select-option value="20">
          20
          </e-select-option>
          <e-select-option value="25">
          25
          </e-select-option>
          <e-select-option value="50">
          50
          </e-select-option>
        </e-select>
        &nbsp;&nbsp;rows
      </td>
    </tr>
  </tfoot>
</table>
<table class="e-table e-table-bordered" data-e-version="2">
  <thead>
    <tr>
      <th class="e-table__col e-table__sort">
        Value
      </th>
      <th class="e-table__col e-table__sort">
        Type
      </th>
      <th class="e-table__col e-table__col-large e-table__col-right e-table__sort">
        Type
      </th>
      <th class="e-table__col e-table__col-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        10%
      </td>
      <td>
        Discount
      </td>
      <td class="e-table__col e-table__col-large e-table__col-right">
        0
      </td>
      <td class="e-table__col e-table__col-right">
        <a></a>
        <e-icon icon="trash-o" type="table"></e-icon>
      </td>
    </tr>
    <tr>
      <td>
        10%
      </td>
      <td>
        Discount
      </td>
      <td class="e-table__col e-table__col-large e-table__col-right">
        0
      </td>
      <td class="e-table__col e-table__col-right">
        <a></a>
        <e-icon icon="trash-o" type="table"></e-icon>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-condensed" data-e-version="2">
  <tbody>
    <tr>
      <td>
        Eiusmod esse, sunt cillum, ut proident commodo in ut ad aliquip.
      </td>
      <td>
        Do eu
      </td>
      <td>
        Dolor quis
      </td>
      <td>
        Ipsum laboris
      </td>
      <td>
        Ut sint
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Deserunt laboris, ut consequat nostrud ipsum id laboris.
      </td>
      <td>
        Sed laboris
      </td>
      <td>
        Voluptate dolore
      </td>
      <td>
        Sint dolore
      </td>
      <td>
        Aliquip sit
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Et consectetur in, in dolor sunt non, ad proident veniam sit eiusmod, dolor?
      </td>
      <td>
        Ipsum nisi
      </td>
      <td>
        Minim anim
      </td>
      <td>
        Aliquip magna
      </td>
      <td>
        Id deserunt
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Nulla excepteur, nostrud culpa velit, eiusmod, commodo laborum officia?
      </td>
      <td>
        Consequat cupidatat
      </td>
      <td>
        In incididunt
      </td>
      <td>
        Aliquip laboris
      </td>
      <td>
        Sint ex
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Dolore aute voluptate ad nostrud excepteur magna?
      </td>
      <td>
        In aute
      </td>
      <td>
        In pariatur
      </td>
      <td>
        Id ut
      </td>
      <td>
        Veniam proident
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<div style="width: 300px">
  <table class="e-table e-table-condensed e-table-baselinealigned e-table-bordered" ng-if="$ctrl.shouldFixRedesignIssues" data-e-version="2">
    <tr class="e-legend">
      <td class="e-legend__title">
        Delivered
      </td>
      <td class="e-legend__value text-align-right text-color-info">
        <e-numeric class="percent" value="0.123" type="percent" precision="1"></e-numeric>
        <small class="e-legend__secondaryvalue">
          (
          <e-numeric value="1234"></e-numeric>
          )
        </small>
      </td>
    </tr>
    <tr class="e-legend">
      <td class="e-legend__title">
        Unsubscribed
      </td>
      <td class="e-legend__value text-align-right text-color-warning">
        <e-numeric class="percent" value="0.456" type="percent" precision="1"></e-numeric>
        <small class="e-legend__secondaryvalue">
          (
          <e-numeric value="5678"></e-numeric>
          )
        </small>
      </td>
    </tr>
  </table>
</div>
<table class="e-table e-table-inner" data-e-version="2">
  <tbody>
    <tr>
      <td>
        Lorem ut, in, qui.
      </td>
      <td>
        Aliquip aliqua
      </td>
      <td>
        Cillum est
      </td>
      <td>
        Culpa dolore
      </td>
      <td>
        Ullamco ipsum
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Ea labore irure, est lorem, est sunt irure officia voluptate irure.
      </td>
      <td>
        Dolore qui
      </td>
      <td>
        Ullamco enim
      </td>
      <td>
        Nostrud sint
      </td>
      <td>
        Eu est
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Quis qui, commodo, officia, enim exercitation, reprehenderit, cillum.
      </td>
      <td>
        Nisi nostrud
      </td>
      <td>
        Quis excepteur
      </td>
      <td>
        Esse deserunt
      </td>
      <td>
        Aute exercitation
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Ut incididunt magna minim sunt in minim veniam duis, qui qui proident proident?
      </td>
      <td>
        In elit
      </td>
      <td>
        Elit aute
      </td>
      <td>
        Ullamco sint
      </td>
      <td>
        Consectetur dolor
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Aliquip in aliqua, non dolore nostrud in ipsum in.
      </td>
      <td>
        Sed do
      </td>
      <td>
        Sed est
      </td>
      <td>
        Nulla proident
      </td>
      <td>
        Eiusmod culpa
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-bordered" data-e-version="2">
  <tbody>
    <tr>
      <td>
        Reprehenderit, anim consectetur enim elit, mollit dolore ut, ut.
      </td>
      <td>
        Eu ullamco
      </td>
      <td>
        Non sed
      </td>
      <td>
        Velit adipiscing
      </td>
      <td>
        Occaecat enim
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Ut, laborum qui, commodo?
      </td>
      <td>
        Sit laborum
      </td>
      <td>
        Id officia
      </td>
      <td>
        Excepteur tempor
      </td>
      <td>
        Tempor minim
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Eu, aute culpa nulla ut dolore, ex nisi fugiat.
      </td>
      <td>
        Elit ipsum
      </td>
      <td>
        In et
      </td>
      <td>
        Amet dolore
      </td>
      <td>
        Ut dolor
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Duis duis eiusmod, sit nisi commodo non irure laborum ut, ut consequat.
      </td>
      <td>
        In cupidatat
      </td>
      <td>
        Ea deserunt
      </td>
      <td>
        Labore sit
      </td>
      <td>
        Non tempor
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Et do proident do, ipsum in, in est.
      </td>
      <td>
        Anim nisi
      </td>
      <td>
        Ut ullamco
      </td>
      <td>
        Ad tempor
      </td>
      <td>
        Officia ut
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-bordered e-table-inner_bordered" data-e-version="2">
  <tbody>
    <tr>
      <td>
        Dolor ut consectetur commodo officia in ex sint ullamco.
      </td>
      <td>
        Nostrud ea
      </td>
      <td>
        Non duis
      </td>
      <td>
        Ut pariatur
      </td>
      <td>
        Aliqua veniam
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Duis velit, esse, culpa dolor cupidatat et ut ex fugiat nisi.
      </td>
      <td>
        Ullamco sit
      </td>
      <td>
        Occaecat sit
      </td>
      <td>
        Proident est
      </td>
      <td>
        Cupidatat fugiat
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Ad magna cupidatat nulla velit exercitation ut.
      </td>
      <td>
        Ipsum dolore
      </td>
      <td>
        Veniam dolor
      </td>
      <td>
        Elit eiusmod
      </td>
      <td>
        Est mollit
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Veniam minim do voluptate enim sint amet eiusmod nostrud ut eu.
      </td>
      <td>
        Eu adipiscing
      </td>
      <td>
        Veniam magna
      </td>
      <td>
        Ipsum voluptate
      </td>
      <td>
        In minim
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Commodo, minim voluptate in anim quis culpa?
      </td>
      <td>
        Enim aliquip
      </td>
      <td>
        Reprehenderit cupidatat
      </td>
      <td>
        Do dolore
      </td>
      <td>
        Culpa aute
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-nowrap">
        17.11.2015
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Preview">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Delete">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table" data-e-version="2">
  <thead class="e-table__content e-table__content-without_border">
    <tr>
      <td>
        Nisi cupidatat veniam, ea, magna, tempor magna labore non.
      </td>
      <td>
        Minim culpa nisi esse, lorem, eu amet incididunt, amet elit?
      </td>
    </tr>
  </thead>
  <tbody class="e-table__content e-table__content-without_border">
    <tr>
      <td>
        Laboris id dolore dolor, occaecat ex exercitation deserunt ut laboris voluptate.
      </td>
      <td>
        Magna nulla, dolore veniam aliquip tempor ex enim excepteur sunt velit voluptate proident.
      </td>
    </tr>
    <tr>
      <td>
        Velit mollit non ut veniam, sit reprehenderit exercitation est sed, voluptate ea.
      </td>
      <td>
        Amet, dolore consectetur sit incididunt sed id dolor, cupidatat sed duis.
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-verticalcentered" data-e-version="2">
  <tbody>
    <tr>
      <td>
        Lorem ipsum
        <br>
        dolor sit amet
      </td>
      <td>
        Vertical centered text
      </td>
    </tr>
    <tr>
      <td>
        Lorem ipsum dolor sit amet
      </td>
      <td>
        Vertical centered text
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-overview" data-e-version="2">
  <tbody>
    <tr class="e-table__row">
      <td>
        Dolor aute incididunt aliqua quis sed labore labore, cillum est sit, enim.
      </td>
    </tr>
    <tr class="e-table__row e-table__row-active">
      <td>
        Labore, occaecat minim mollit cillum pariatur in, incididunt, ipsum ut officia.
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-verticalcentered e-table-condensed" data-e-version="2">
  <tbody>
    <tr class="e-table__row">
      <td class="e-table__col e-table__col-auto">
        <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-1">
        <label for="tablelist-1"></label>
      </td>
      <td class="e-table__col e-table__col-auto">
        <div class="e-table__thumbnail" style="background-image: url(https://placehold.it/650x1200/32d17e/fff);"></div>
      </td>
      <td>
        <div class="text-lineheight">
          <b>
            Outlook 2013
          </b>
          <div class="text-color-shade">
            Windows
          </div>
        </div>
      </td>
      <td class="e-table__col e-table__col-auto e-table__col-nowrap">
        <e-icon icon="user" type="table"></e-icon>
        82%
      </td>
    </tr>
    <tr class="e-table__row">
      <td class="e-table__col e-table__col-auto">
        <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-2">
        <label for="tablelist-2"></label>
      </td>
      <td class="e-table__col e-table__col-auto">
        <div class="e-table__thumbnail e-table__thumbnail-empty"></div>
      </td>
      <td>
        <div class="text-lineheight">
          <b>
            Outlook 2013
          </b>
          <div class="text-color-shade">
            Windows
          </div>
        </div>
      </td>
      <td class="e-table__col e-table__col-auto e-table__col-nowrap">
        <e-icon icon="user" type="table"></e-icon>
        32%
      </td>
    </tr>
    <tr class="e-table__row e-table__row-active">
      <td class="e-table__col e-table__col-auto">
        <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-3">
        <label for="tablelist-3"></label>
      </td>
      <td class="e-table__col e-table__col-auto">
        <div class="e-table__thumbnail" style="background-image: url(https://placehold.it/50x50/32d17e/fff);"></div>
      </td>
      <td>
        <div class="text-lineheight">
          <b>
            Outlook 2013
          </b>
          <div class="text-color-shade">
            Windows
          </div>
        </div>
      </td>
      <td class="e-table__col e-table__col-auto e-table__col-nowrap">
        <e-icon icon="user" type="table"></e-icon>
        12%
      </td>
    </tr>
    <tr class="e-table__row">
      <td class="e-table__col e-table__col-auto">
        <input class="e-checkbox e-checkbox-onlycheckbox" type="checkbox" id="tablelist-3">
        <label for="tablelist-3"></label>
      </td>
      <td class="e-table__col e-table__col-auto">
        <div class="e-table__thumbnail" style="background-image: url(https://placehold.it/50x50/32d17e/fff);"></div>
      </td>
      <td>
        <div class="text-lineheight">
          <b class="text-color-warning">
            <e-icon icon="e-clock-o" size="small" type="inline" color="warning"></e-icon>
            Outlook 2013
          </b>
          <div class="text-color-warning">
            Windows
          </div>
        </div>
      </td>
      <td class="e-table__col e-table__col-auto e-table__col-nowrap">
        <e-icon icon="user" type="table"></e-icon>
        12%
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table e-table-zebra e-table-withheader" data-e-version="2">
  <thead>
    <tr>
      <th class="e-table__col e-table__col-large">name</th>
      <th>width</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>.e-table__col-auto</td>
      <td>1%</td>
    </tr>
    <tr>
      <td>.e-table__col-xxsmall</td>
      <td>3%</td>
    </tr>
    <tr>
      <td>.e-table__col-xsmall</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>.e-table__col-small</td>
      <td>10%</td>
    </tr>
    <tr>
      <td>.e-table__col-medium</td>
      <td>15%</td>
    </tr>
    <tr>
      <td>.e-table__col-large</td>
      <td>20%</td>
    </tr>
    <tr>
      <td>.e-table__col-xlarge</td>
      <td>25%</td>
    </tr>
  </tbody>
</table>