HTML Tables

HTML tables don’t need to look bad. Quasar takes care of them by default if you add q-table CSS class to them.

If the default table style is not enough, also add the following CSS classes to best suit your needs: bordered, horizontal-delimiter, vertical-delimiter, cell-delimiter, striped, striped-even, striped-odd, highlight, compact, loose, flipped, responsive.

<table class="q-table">
  <thead>
    <tr>
      <th class="text-left">Name</th>
      <th class="text-right">Price</th>
      <th class="text-right">In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-left">Item #1</td>
      <td class="text-right">$10.11</td>
      <td class="text-right">101</td>
    </tr>
    <tr>
      <td class="text-left">Item #2</td>
      <td class="text-right">$8.88</td>
      <td class="text-right">34</td>
    </tr>
    <tr>
      <td class="text-left">Item #3</td>
      <td class="text-right">$0.15</td>
      <td class="text-right">1670</td>
    </tr>
  </tbody>
</table>

If you’re using responsive CSS class, then add data-th="Column name" to each <td>. Example:

<table class="q-table responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Name">Item #1</td>
      <td data-th="Price">$10.11</td>
      <td data-th="In Stock">101</td>
    </tr>
    <tr>
      <td data-th="Name">Item #2</td>
      <td data-th="Price">$8.88</td>
      <td class="text-right">34</td>
    </tr>
    <tr>
      <td data-th="Name">Item #3</td>
      <td data-th="Price">$0.15</td>
      <td data-th="In Stock">1670</td>
    </tr>
  </tbody>
</table>

Chat Label

Components

Layout

CSS

Form Inputs

Vue Components

HTML Tables