Here is my solution (in Spring with Thymeleaf and jQuery):
HTML:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org"> <body> <div id="objects" th:fragment="ObjectList"> <br/> <div id='cap'> <span>Objects</span> </div> <div id="hdr"> <div> <div class="Cell">Name</div> <div class="Cell">Type</div> </div> </div> <div id="bdy"> <div th:each="object : ${objectlist}"> <div class="Cell" th:text="${object.name}">name</div> <div class="Cell" th:text="${object.type}">type</div> </div> </div> </div> </body> </html>
CSS
@CHARSET "UTF-8"; #cap span { display: table-caption; border:2px solid; font-size: 200%; padding: 3px; } #hdr { display:block; padding:0px; margin-left:0; border:2px solid; } #bdy { display:block; padding:0px; margin-left:0; border:2px solid; } #objects #bdy { height:300px; overflow-y: auto; } #hdr div div{ margin-left:-3px; margin-right:-3px; text-align: right; } #hdr div:first-child { text-align: left; } #bdy div div { margin-left:-3px; margin-right:-3px; text-align: right; } #bdy div div:first-child { text-align: left; } .Cell { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; }
JavaScript:
$(document).ready(function(){ var divs = ['#objects']; divs.forEach(function(div) { if ($(div).length > 0) { var widths = []; var totalWidth = 0; $(div+' #hdr div div').each(function() { widths.push($(this).width()) }); $(div+' #bdy div div').each(function() { var col = $(this).index(); if ( $(this).width() > widths[col] ) { widths[col] = $(this).width(); } }); $(div+' #hdr div div').each(function() { var newWidth = widths[$(this).index()]+5; $(this).css("width", newWidth); totalWidth += $(this).outerWidth(); }); $(div+' #bdy div div').each(function() { $(this).css("width", widths[$(this).index()]+5); }); $(div+' #hdr').css("width", totalWidth); $(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0)); } }) });
AixNPanes Dec 03 '14 at 15:59 2014-12-03 15:59
source share