53 lines
2.0 KiB
XML
53 lines
2.0 KiB
XML
<?xml version="1.0" encoding="UTF-8" ?>
|
|
<dt-example table-type="html-complex-header" table-class="display nowrap" order="5">
|
|
|
|
<css lib="datatables responsive">
|
|
th {
|
|
position: relative;
|
|
min-height: 41px;
|
|
}
|
|
th span {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
</css>
|
|
<js lib="jquery datatables responsive">
|
|
<![CDATA[
|
|
|
|
$(document).ready(function() {
|
|
// jQuery update a column title from the demo table to contain a long description
|
|
// You would not need to do this in your own code.
|
|
$('#example thead tr:eq(0) th:eq(2)').html("This is a really long column title!");
|
|
|
|
// Wrap the colspan'ing header cells with a span so they can be positioned
|
|
// absolutely - filling the available space, and no more.
|
|
$('#example thead th[colspan]').wrapInner( '<span/>' ).append( ' ' );
|
|
|
|
// Standard initialisation
|
|
$('#example').DataTable( {
|
|
responsive: true,
|
|
paging: false
|
|
} );
|
|
} );
|
|
|
|
]]>
|
|
</js>
|
|
|
|
<title lib="Responsive">Complex headers (rowspan / colspan)</title>
|
|
|
|
<info><![CDATA[
|
|
|
|
This example shows how Responsive can be used with _complex headers_ (i.e. headers that contain `colspan` attributes for one or more cells). As Responsive will removed columns one at a time the cell with the `colspan` attribute can end up forcing the width of a column, disrupting the flow. Rather than removing all columns under the `colspan` cell, we want to reduce the amount of text that is visible in that cell. This example shows how that can be achieved thought a little bit of jQuery and CSS.
|
|
|
|
We use jQuery to find the header cells which have a `colspan` attribute and wrap their contents in a `-tag span` tag. That `-tag span` is then set to `position: absolute;` using `text-overflow: ellipsis`. The result is that the text of the `colspan` cell will reduce automatically to fit the available area based on the contents of the column cells below it.
|
|
|
|
This functionality is not currently built into Responsive. It might be included in future.
|
|
|
|
]]></info>
|
|
|
|
</dt-example> |