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>
Main header Main header Main header Main header Main header
Some content Some content Some content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Some content
Some content Some content Some content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Some content
Some content Some content Some content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Some content

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>
Main header Main header Main header Main header
Some content Some content Some content Some content
Some content Some content Some content Some content
Some content Some content Some content Some content
Main header Main header Main header Main header
Some content Some content Some content Some content
Some content Some content Some content Some content
Some content Some content Some content Some content

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>
Main header Main header Main header Main header
Some content Some content Some content Some content
Some content Some content Some content Some content
Some content Some content Some content Some content
Main header Main header Main header Main header
Some content Some content Some content Some content
Some content Some content Some content Some content
Some content Some content Some content Some content
Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase

lorem ipsum generator