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">| 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">| Departments | Column 2 | Column 3 | Coulmn 4 | Coulmn 5 |
|---|---|---|---|---|
| National Defence | 3% | 4% | 5% | |
| Employment and Social | 3% | 4% | 5% | |
| Canada Revenue | 3% | 4% | 5% | |
| Total | 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">| Departments | Column 2 | Column 3 | Coulmn 4 | Coulmn 5 |
|---|---|---|---|---|
| National Defence | 3% | 4% | 5% | |
| Employment and Social | 3% | 4% | 5% | |
| Canada Revenue | 3% | 4% | 5% | |
| Total | 3% | 4% | 5% |
Known issues
- Complex table structure – It is not supported
View example
<table class="table-columnfloat table">Top departments Departments Column 2 Column 3 Coulmn 4 Coulmn 5 National Defence 3% 4% 5% Employment and Social 3% 4% 5% HTML
<table class="table-columnfloat table"> <caption>Top departments</caption> <thead> <tr> <th rowspan="2">Departments</th> <th colspan="3">Column 2</th> </tr> <tr> <th>Column 3</th> <th>Coulmn 4</th> <th>Coulmn 5</th> </tr> </thead> <tbody> <tr> <th>National Defence</th> <td>3%</td> <td>4%</td> <td>5%</td> </tr> <tr> <th>Employment and Social</th> <td>3%</td> <td>4%</td> <td>5%</td> </tr> </tbody> </table> - Vertical alignment – The issue became prominent when a cell have variation for its height compare to the other cells in the table.
View example
Top departments Departments Column 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Coulmn 4 Coulmn 5 National Defence 65% (normal) 3% 4% 5% Employment and Social 75% (normal) 3% 4% 5% - Parent HTML element that contains floated children elements is the resulting height is no longer
auto, but instead renders asheight: 0;View example
Top departments Departments Column 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Coulmn 4 Coulmn 5 National Defence 65% (normal) 3% 4% 5% Employment and Social 75% (normal) 3% 4% 5%
Page details
- Date modified: