Search

Float column in a data table

Purpose

A data table cell on a specific column floats under the preceding column.

Only supported by simple data table, structured with the explicit row group thead, tbody and tfoot.

Design and coding

Basic use

Use to display a table data in a user friendly manner.

Default

Wrapping the following <td> of the <th> under that <th> element. It is expected that the column header (<th> in <thead>) of the column being wrapped would be invisible to users but readable by screen readers.

In order to float a <td> element under the preceding <th> element, CSS classes .table-columnfloat and .table must be set on the <table>.

The heading of the floated column is hidden, so there is a risk where the column heading of the preceding column don’t represent the content that was floated under. Please set column title wisely or if that column is a column header (link to technique about column header) then it can be deducted the content that is moved under is a middle description for that row cell heading.

<table class="table-columnfloat table">
Top departments
Departments Column 2 Column 3 Coulmn 4 Coulmn 5
National Defence Data Column 2 3% 4% 5%
Employment and Social Data Column 2 3% 4% 5%
Total Data Column 2 3% 4% 5%

Enhanced use

Striped rows (zebra stripe) and hover rows

Use to add a zebra-striped hover effect to any table row within the <tbody>.

<table class="table-columnfloat table table-striped table-hover">
Top departments
Departments Column 2 Column 3 Coulmn 4 Coulmn 5
National Defence 65% (normal) 3% 4% 5%
Employment and Social 75% (normal) 3% 4% 5%
Canada Revenue 85% (normal) 3% 4% 5%
Total 95% (normal) 3% 4% 5%

Bordered rows

Use .table-bordered to separate information when the table cells have a lot of data in them, and word wrap.

This makes it easy for the user to tell what information belongs to which cell.

<table class="table-columnfloat table table-striped table-hover table-bordered">
Top departments
Departments Column 2 Column 3 Coulmn 4 Coulmn 5
National Defence 65% (normal) 3% 4% 5%
Employment and Social 75% (normal) 3% 4% 5%
Canada Revenue 85% (normal) 3% 4% 5%
Total 95% (normal) 3% 4% 5%

Known issues

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: