Styleguide

Tables

Eine Standardtabelle

Aktion Rechnungs-Nr. DV Referenz Sichtprüfung Debitorname DV Referenz Hochgeladen Forderung
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 2.832,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 11.222,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 6.333,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 10,99 €

    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Aktion</span>
          </th>
          <th class="c-table__th">Rechnungs-Nr.</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">DV Referenz</span>
          </th>
          <th class="c-table__th u-font-center">Sichtprüfung</th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Debitorname</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortdown">DV Referenz</span>
          </th>
          <th class="c-table__th">Hochgeladen</th>
          <th class="c-table__th u-font-right">
            <span class="c-table__th--sortable">Forderung</span>
          </th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right c-table__cell">2.832,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr c-table__tr--disabled">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">11.222,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">6.333,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">10,99 €</td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer">
      </tfoot>
    </table>

Tabelle auf weissem Panel

Überschrift

Aktion Rechnungs-Nr. DV Referenz Sichtprüfung Debitorname DV Referenz Hochgeladen Forderung
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 2.832,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 11.222,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 6.333,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 10,99 €

  <div class="o-panel">
    <div class="o-panel__header o-panel__white">
      <div class="o-panel__left">
        <i class="dvm-icon-angle-left o-panel__icon"></i>
      </div>
      <div class="o-panel__center">
        <h3 class="o-panel__heading">Überschrift</h3>
      </div>
      <div class="o-panel__right">
        <i class="dvm-icon-angle-right o-panel__icon"></i>
      </div>
    </div>
    <div class="o-panel__body">
    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Aktion</span>
          </th>
          <th class="c-table__th">Rechnungs-Nr.</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">DV Referenz</span>
          </th>
          <th class="c-table__th u-font-center">Sichtprüfung</th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Debitorname</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortdown">DV Referenz</span>
          </th>
          <th class="c-table__th">Hochgeladen</th>
          <th class="c-table__th u-font-right">
            <span class="c-table__th--sortable">Forderung</span>
          </th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">2.832,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr c-table__tr--disabled">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">11.222,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">6.333,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">10,99 €</td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer"></tfoot>
    </table>
    </div>
  </div>

Tabelle auf dunklem Panel mit Aktionsbereichen

Überschrift

Aktion Rechnungs-Nr. DV Referenz Sichtprüfung Debitorname DV Referenz Hochgeladen Forderung
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 2.832,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 11.222,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 6.333,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 10,99 €

  <div class="o-panel">
    <div class="o-panel__header o-panel__dark">
      <div class="o-panel__left">
        <i class="dvm-icon-angle-left o-panel__icon"></i>
      </div>
      <div class="o-panel__center">
        <h3 class="o-panel__heading o-panel__heading--white">Überschrift</h3>
      </div>
      <div class="o-panel__right">
        <i class="dvm-icon-angle-right o-panel__icon"></i>
      </div>
    </div>
    <div class="o-panel__body">
    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Aktion</span>
          </th>
          <th class="c-table__th">Rechnungs-Nr.</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">DV Referenz</span>
          </th>
          <th class="c-table__th u-font-center">Sichtprüfung</th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Debitorname</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortdown">DV Referenz</span>
          </th>
          <th class="c-table__th">Hochgeladen</th>
          <th class="c-table__th u-font-right">
            <span class="c-table__th--sortable">Forderung</span>
          </th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">2.832,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr c-table__tr--disabled">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">11.222,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">6.333,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">10,99 €</td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer"></tfoot>
    </table>
    </div>
  </div>

Tabelle auf dunklem Panel mit Aktionsbereichen und Suchfeld rechts

Überschrift

Aktion Rechnungs-Nr. DV Referenz Sichtprüfung Debitorname DV Referenz Hochgeladen Forderung
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 2.832,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 11.222,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 6.333,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 10,99 €

  <div class="o-panel">
    <div class="o-panel__header o-panel__dark">
      <div class="o-panel__left">
        <i class="dvm-icon-angle-left o-panel__icon"></i>
      </div>
      <div class="o-panel__center">
        <h3 class="o-panel__heading o-panel__heading--white">Überschrift</h3>
      </div>
      <div class="o-panel__right">
        <i class="dvm-icon-angle-right o-panel__icon"></i>
      </div>
    </div>
    <div class="o-panel__body">
    <div clasS="o-panel__search o-panel__right">
      <div class="c-input__control">
        <input class="c-input" type="text" placeholder="Suchtext ..." size="60"></input>
        <i class="dvm-icon-search has-search-icon c-input"></i>
      </div>
    </div>
    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Aktion</span>
          </th>
          <th class="c-table__th">Rechnungs-Nr.</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">DV Referenz</span>
          </th>
          <th class="c-table__th u-font-center">Sichtprüfung</th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Debitorname</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortdown">DV Referenz</span>
          </th>
          <th class="c-table__th">Hochgeladen</th>
          <th class="c-table__th u-font-right">
            <span class="c-table__th--sortable">Forderung</span>
          </th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">2.832,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr c-table__tr--disabled">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">11.222,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">6.333,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">10,99 €</td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer"></tfoot>
    </table>
    </div>
  </div>

Tabelle auf dunklem Panel mit Aktionsbereichen und Suchfeld links

Überschrift

Aktion Rechnungs-Nr. DV Referenz Sichtprüfung Debitorname DV Referenz Hochgeladen Forderung
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 2.832,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 11.222,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 12.122,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 6.333,22 €
0037 -- Dagobert Duck BLODDY WURST 18.01.2016 14:01 10,99 €

  <div class="o-panel">
    <div class="o-panel__header o-panel__dark">
      <div class="o-panel__left">
        <i class="dvm-icon-angle-left o-panel__icon"></i>
      </div>
      <div class="o-panel__center">
        <h3 class="o-panel__heading o-panel__heading--white">Überschrift</h3>
      </div>
      <div class="o-panel__right">
        <i class="dvm-icon-angle-right o-panel__icon"></i>
      </div>
    </div>
    <div class="o-panel__body">
    <div clasS="o-panel__search o-panel__left">
      <div class="c-input__control">
        <input class="c-input" type="text" placeholder="Suchtext ..." size="60"></input>
        <i class="dvm-icon-search has-search-icon c-input"></i>
      </div>
    </div>
    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Aktion</span>
          </th>
          <th class="c-table__th">Rechnungs-Nr.</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">DV Referenz</span>
          </th>
          <th class="c-table__th u-font-center">Sichtprüfung</th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Debitorname</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortdown">DV Referenz</span>
          </th>
          <th class="c-table__th">Hochgeladen</th>
          <th class="c-table__th u-font-right">
            <span class="c-table__th--sortable">Forderung</span>
          </th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">2.832,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr c-table__tr--disabled">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">11.222,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="c-table__cell u-font-center">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">12.122,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">6.333,22 €</td>
        </tr>
        <tr class="c-table__tr">
          <td class="c-table__cell"></td>
          <td class="c-table__cell">0037</td>
          <td class="c-table__cell">--</td>
          <td class="u-font-center c-table__cell">
            <div class="c-table__icon dvm-icon-search"></div>
          </td>
          <td class="c-table__cell">Dagobert Duck</td>
          <td class="c-table__cell">BLODDY WURST</td>
          <td class="c-table__cell">18.01.2016 14:01</td>
          <td class="c-table__cell u-font-strong u-font-right">10,99 €</td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer"></tfoot>
    </table>
    </div>
  </div>