Back



Please resize the window to see the responsive behavior of the table.

Table examples with source code

Example 1 - Breakpoint md

Test1 Test2 Test3
A B C
D E F
G H I
J K L

Example 2 - Breakpoint xl

Code Company City CEO
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. BRISBANE John Doe
BBN BABY BUNTING GROUP LIMITED MELBOURNE Jane Doe

Source Code - Example 1

HTML Source 


<table class="avalynx-table avalynx-table-md table table-bordered table-striped">
	<thead>
		<tr>
			<th>Test1</th>
			<th>Test2</th>
			<th>Test3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('.table-example-md');
});

Source Code - Example 2

HTML Source 


<table class="avalynx-table avalynx-table-xl table table-bordered table-striped">
	<thead>
		<tr>
			<th>Code</th>
			<th>Company</th>
			<th>City</th>
			<th>CEO</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>AAC</td>
			<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
			<td>BRISBANE</td>
			<td>John Doe</td>
		</tr>
	</tbody>
</table>

JavaScript SourceCopy to clipboard


document.addEventListener('DOMContentLoaded', () => {
	new AvalynxTable('.table-example-xl');
});