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>