klenn

bootstrap 响应式表格 fixed定位

html
<table class="responsive">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
<td>row 1, cell 6</td>
<td>row 1, cell 7</td>
<td>row 1, cell 8</td>
</tr>
</table>

css

table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }

/* Mobile */
@media only screen and (max-width: 767px) {

table.responsive { margin-bottom: 0; }

.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }

div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }

table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }


}

js

$(document).ready(function() {
var switched = false;
var updateTables = function() {
if (($(window).width() < 767) && !switched ){
switched = true;
$("table.responsive").each(function(i, element) {
splitTable($(element));
});
return true;
}
else if (switched && ($(window).width() > 767)) {
switched = false;
$("table.responsive").each(function(i, element) {
unsplitTable($(element));
});
}
};

$(window).load(updateTables);
$(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
$(window).on("resize", updateTables);


function splitTable(original)
{
original.wrap("<div class='table-wrapper' />");

var copy = original.clone();
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
copy.removeClass("responsive");

original.closest(".table-wrapper").append(copy);
copy.wrap("<div class='pinned' />");
original.wrap("<div class='scrollable' />");

setCellHeights(original, copy);
}

function unsplitTable(original) {
original.closest(".table-wrapper").find(".pinned").remove();
original.unwrap();
original.unwrap();
}

function setCellHeights(original, copy) {
var tr = original.find('tr'),
tr_copy = copy.find('tr'),
heights = [];

tr.each(function (index) {
var self = $(this),
tx = self.find('th, td');

tx.each(function () {
var height = $(this).outerHeight(true);
heights[index] = heights[index] || 0;
if (height > heights[index]) heights[index] = height;
});

});

tr_copy.each(function (index) {
$(this).height(heights[index]);
});
}

});