Styleguide

Tables

Die neue Belegtabelle

Aktion Zahlstatus Mahnstatus DV-Referenz Belegart Beleg-Nr. Produkt Kundenname Debitoren-Limit Hochgeladen Fällig bis Überfällig Bereits bezahlt Forderung
1. Mahnung R000001579 Rechnung 25062016 DV-Factoring Muster Consult AG mit einem langen Namen mit einem sehr langen Namen 30.000€ 01.05.2016 15.05.2016 Überfällig 30T 1.300,50 € 4.392,50 €
1. Mahnung R000001579 Rechnung 25062016 DV-Factoring Muster Consult AG 30.000€ 01.05.2016 15.05.2016 Überfällig 30T 1.300,50 € 4.392,50 €
Ausgeglichen
--
R000001577 Rechnung 23062016 DV-Factoring Muster Consult AG 30.000€ 01.06.2016 09.01.2016 1.300,50 € 4.392,50 €
Offen
--
R000001575 Rechnung 21062016 DV-Factoring Muster Consult AG 30.000€ 01.06.2016 09.01.2016 1.300,50 € 4.392,50 €
Offen
--
Fehler 501, 15.08.1016: Der hochgeladene Beleg Musterbeleg_08162016.pdf ist mit einem Passwort geschützt.
Bitte laden Sie nur Belege ohne Passwort hoch!

    <table class="c-table">
      <thead class="c-table__header">
        <tr>
          <th class="c-table__th c-table__th--bottom">Aktion</th>
          <th class="c-table__th">
            <span class="c-table__th--sortup">Zahlstatus</span>
            <span class="c-table__th--double">Mahnstatus</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">DV-Referenz</span>
            <span class="c-table__th--double">Belegart</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Beleg-Nr.</span>
            <span class="c-table__th--double">Produkt</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Kundenname</span>
            <span class="c-table__th--double">Debitoren-Limit</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Hochgeladen</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Fällig bis</span>
            <span class="c-table__th--double">Überfällig</span>
          </th>
          <th class="c-table__th">
            <span class="c-table__th--sortable">Bereits bezahlt</span>
          </th>
          <th class="c-table__th">
            <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__cellbig">
          <div class="c-dropdown__button c-table__component--center">
            <span class="icon dvm-icon-caret-down"></span>
          </div>
        </td>
        <td class="c-table__cellbig">
          <span class="c-status c-status--mahnung">1. Mahnung</span>
        </td>
        <td class="c-table__cellbig">
          <span class="c-table__cell--big c-table__cell--link">R000001579</span>
          <span class="c-table__cell--small">Rechnung</span>
        </td>
        <td class="c-table__cellbig">
          <span class="c-table__cell--big c-table__cell--link">25062016</span>
          <span class="c-table__cell--small">DV-Factoring</span>
        </td>
        <td class="c-table__cellbig">
          <span class="c-table__cell--big" style="width: 300px">Muster Consult AG mit einem langen Namen mit einem sehr langen Namen</span>
          <span class="c-table__cell--small">30.000€</span>
        </td>
        <td class="c-table__cellbig c-table__cell--top">
          <span class="c-table__cell--big">01.05.2016</span>
        </td>
        <td class="c-table__cellbig">
          <span class="c-table__cell--big">15.05.2016</span>
          <span class="c-table__cell--small">Überfällig 30T</span>
        </td>
        <td class="u-font-right c-table__cellbig c-table__cell--top">
          <span class="c-table__cell--big">1.300,50 €</span>
        </td>
        <td class="c-table__cellbig u-font-strong u-font-right c-table__cell--top">
          <span class="c-table__cell--big">4.392,50 €</span>
        </td>
      </tr>
        <tr class="c-table__tr">
          <td class="c-table__cellbig">
            <div class="c-dropdown__button c-table__component--center">
              <span class="icon dvm-icon-caret-down"></span>
            </div>
          </td>
          <td class="c-table__cellbig">
            <span class="c-status c-status--mahnung">1. Mahnung</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big c-table__cell--link">R000001579</span>
            <span class="c-table__cell--small">Rechnung</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big c-table__cell--link">25062016</span>
            <span class="c-table__cell--small">DV-Factoring</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">Muster Consult AG</span>
            <span class="c-table__cell--small">30.000€</span>
          </td>
          <td class="c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">01.05.2016</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">15.05.2016</span>
            <span class="c-table__cell--small">Überfällig 30T</span>
          </td>
          <td class="u-font-right c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">1.300,50 €</span>
          </td>
          <td class="c-table__cellbig u-font-strong u-font-right c-table__cell--top">
            <span class="c-table__cell--big">4.392,50 €</span>
          </td>
        </tr>

        <tr class="c-table__tr">
          <td class="c-table__cellbig">
            <div class="c-dropdown__button c-table__component--center">
              <span class="icon dvm-icon-caret-down"></span>
            </div>
          </td>
          <td class="c-table__cellbig">
            <span class="c-statusbeleg">
              <i class="c-statusbeleg--icon c-statusbeleg--ausgeglichen icon dvm-icon-checkmark-circled"></i>Ausgeglichen
            </span>
            <br/>
            <span class="c-status">--</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big c-table__cell--link">R000001577</span>
            <span class="c-table__cell--small">Rechnung</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big c-table__cell--link">23062016</span>
            <span class="c-table__cell--small">DV-Factoring</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">Muster Consult AG</span>
            <span class="c-table__cell--small">30.000€</span>
          </td>
          <td class="c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">01.06.2016</span>
          </td>
          <td class="c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">09.01.2016</span>
          </td>
          <td class="u-font-right c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">1.300,50 €</span>
          </td>
          <td class="c-table__cellbig u-font-strong u-font-right c-table__cell--top">
            <span class="c-table__cell--big">4.392,50 €</span>
          </td>
        </tr>

        <tr class="c-table__tr">
          <td class="c-table__cellbig">
            <div class="c-dropdown__button c-table__component--center">
              <span class="icon dvm-icon-caret-down"></span>
            </div>
          </td>
          <td class="c-table__cellbig">
            <span class="c-statusbeleg">
              <i class="c-statusbeleg--icon c-statusbeleg--offen icon dvm-icon-trash-o"></i>Offen
            </span>
            <br/>
            <span class="c-status">--</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">R000001575</span>
            <span class="c-table__cell--small">Rechnung</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">21062016</span>
            <span class="c-table__cell--small">DV-Factoring</span>
          </td>
          <td class="c-table__cellbig">
            <span class="c-table__cell--big">Muster Consult AG</span>
            <span class="c-table__cell--small">30.000€</span>
          </td>
          <td class="c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">01.06.2016</span>
          </td>
          <td class="c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">09.01.2016</span>
          </td>
          <td class="u-font-right c-table__cellbig c-table__cell--top">
            <span class="c-table__cell--big">1.300,50 €</span>
          </td>
          <td class="c-table__cellbig u-font-strong u-font-right c-table__cell--top">
            <span class="c-table__cell--big">4.392,50 €</span>
          </td>
        </tr>

        <tr class="c-table__tr">
          <td class="c-table__cellbig">
            <div class="c-dropdown__button c-table__component--center">
              <span class="icon dvm-icon-caret-down"></span>
            </div>
          </td>
          <td class="c-table__cellbig">
            <span class="c-statusbeleg">
              <i class="c-statusbeleg--icon c-statusbeleg--offen icon dvm-icon-trash-o"></i>Offen
            </span>
            <br/>
            <span class="c-status">--</span>
          </td>
          <td class="c-table__cellbig c-table__cell--error" colspan="5">
            <strong>Fehler 501, 15.08.1016:</strong> Der hochgeladene Beleg <a href="#" class="c-table__link"><i class="dvm-icon-arrow-circle-right c-table__cellicon"></i> Musterbeleg_08162016.pdf</a> ist mit einem Passwort geschützt. <br/>
  Bitte laden Sie nur Belege ohne Passwort hoch!
          </td>
        </tr>
      </tbody>
      <tfoot class="c-table__footer"></tfoot>
    </table>
    </div>