Table draft

Table is used to organize and display information from a data set. Provides table styles in addition to features like sticky headers and support for narrow viewports.

<nord-table>
  <table>
    <thead>
      <tr>
        <th class="n-table-align-right">Amount</th>
        <th>Description</th>
        <th>Method</th>
        <th class="n-table-align-right">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">20.3.2021</td>
      </tr>
      <tr>
        <td class="n-table-align-right">29,90&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">19.3.2021</td>
      </tr>
      <tr>
        <td class="n-table-align-right">50,00&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">18.3.2021</td>
      </tr>
      <tr>
        <td class="n-table-align-right">290,00&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">17.3.2021</td>
      </tr>
      <tr>
        <td class="n-table-align-right">49,90&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">16.3.2021</td>
      </tr>
      <tr>
        <td class="n-table-align-right">25,00&thinsp;€</td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td>Card</td>
        <td class="n-table-align-right">15.3.2021</td>
      </tr>
    </tbody>
  </table>
</nord-table>

<nord-table>
  <table>
    <thead>
      <tr>
        <th class="n-table-align-right">Amount</th>
        <th>Status</th>
        <th>Description</th>
        <th>Method</th>
        <th class="n-table-align-right">Date</th>
        <th class="n-table-align-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">20.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">29,90&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">20.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">50,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">19.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">49,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">17.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">1023,00&thinsp;€</td>
        <td><nord-badge type="danger">Alert</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">12.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">32,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">10.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">40,00&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">9.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">28,52&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">4.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">4.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">220,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">3.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">50,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">1.3.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">30.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">30.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">30.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">29,90&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">28.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">50,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">28.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">49,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">26.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">1023,00&thinsp;€</td>
        <td><nord-badge type="danger">Alert</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">24.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">32,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">23.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">40,00&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">22.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">28,52&thinsp;€</td>
        <td><nord-badge type="warning">Warning</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">21.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">350,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">20.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="n-table-align-right">220,00&thinsp;€</td>
        <td><nord-badge type="success">Success</nord-badge></td>
        <td class="n-table-ellipsis">
          Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
          adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
          consectetuer adipiscing
        </td>
        <td class="n-caption">Card</td>
        <td class="n-caption n-table-align-right">18.2.2021</td>
        <td>
          <div class="n-table-actions">
            <nord-button size="s">
              <svg
                style="margin-top: 1px"
                width="12"
                height="12"
                viewBox="0 0 140 140"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="currentColor"
                  d="M105 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zm-52.5 0a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0zM0 70a17.5 17.5 0 1 0 35 0 17.5 17.5 0 1 0-35 0z"
                ></path>
              </svg>
            </nord-button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</nord-table>

<nord-stack>
  <nord-card padding="none">
    <h2 slot="header">Condensed</h2>
    <nord-table density="condensed">
      <table>
        <thead>
          <tr>
            <th>Amount</th>
            <th>Description</th>
            <th>Method</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
        </tbody>
      </table>
    </nord-table>
  </nord-card>

  <nord-card padding="none">
    <h2 slot="header">Default</h2>
    <nord-table>
      <table>
        <thead>
          <tr>
            <th>Amount</th>
            <th>Description</th>
            <th>Method</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
        </tbody>
      </table>
    </nord-table>
  </nord-card>
  <nord-card padding="none">
    <h2 slot="header">Relaxed</h2>
    <nord-table density="relaxed">
      <table>
        <thead>
          <tr>
            <th>Amount</th>
            <th>Description</th>
            <th>Method</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
          <tr>
            <td>350,00&thinsp;€</td>
            <td class="n-table-ellipsis">
              Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
              consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum
              dolor sit amet consectetuer adipiscing
            </td>
            <td>Card</td>
            <td>20.3.2021</td>
          </tr>
        </tbody>
      </table>
    </nord-table>
  </nord-card>
</nord-stack>

Properties

Property	Attribute	Description	Type	Default
`density`	`density`	Controls the density of the table's rows and headers. Relaxed increases space, condensed reduces space.	`"condensed" \| "default" \| "relaxed"`	`"default"`

Slots

Slot name	Description
Default slot	The table.