Tables

Responsee uses several simple CSS properties for modification of table appearance. Tables are thus more tabular and applicable in responsive design. Several examples of table application in layout you will find on this website.

One table for full width

<div class="line">
<table>
<thead>
<tr>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
<th width="400">Main header</th>
<th>Main header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>

Two tables without margin side by side for full width

<div class="line">
<div class="l-6 s-12">
<table>
<thead>
<tr>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
<div class="l-6 s-12">
<table>
<thead>
<tr>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>

Two tables with application of margin class, side by side for full width

<div class="line">
<div class="margin">
<div class="l-6 s-12">
<table>
<thead>
<tr>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
<div class="l-6 s-12">
<table>
<thead>
<tr>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
<th>Main header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>