Table Component

Table is a simpliest way to present data and has been used since the early HTML. It is mainly for organizing row-column data matrix-based presentation. Bissetii also supports table rendering especially for mobile friendliness first.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass styling script responsible for styling table is located at:

assets/css/bissetii/modules/core/_Table.scss

Javascript Parts

This component does not depend on Javscript.

HTML Parts

Bissetii uses the conventional HTML table syntax instead of the custom types HTML. To facilitate mobile-friendliness, the table overflow at y-directions with scrolling enabled.

Bissetii is very strict with <thead> and <tbody> conventions for styling the appropriate titles.

One example would be:

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><p>Data 1,1</p></td>
			<td><p>Data 1,2</p></td>
			<td><p>Data 1,3</p></td>
			<td><p>Data 1,4</p></td>
		</tr>
		<tr>
			<td><p>Data 2,1</p></td>
			<td><p>Data 2,2</p></td>
			<td><p>Data 2,3</p></td>
			<td><p>Data 2,4</p></td>
		</tr>
		<tr>
			<td><p>Data 3,1</p></td>
			<td><p>Data 3,2</p></td>
			<td><p>Data 3,3</p></td>
			<td><p>Data 3,4</p></td>
		</tr>
		<tr>
			<td><p>Data 4,1</p></td>
			<td><p>Data 4,2</p></td>
			<td><p>Data 4,3</p></td>
			<td><p>Data 4,4</p></td>
		</tr>
	</tbody>
</table>

This will render as: