css - Vertical alignment within thead in table with scrolling tbody -
i have table header th
values wrap , not, resulting in floating top. can't seem align values, , border, bottom of header.
working code here: jsfiddle
i tried following, had no effect:
th { vertical-align: bottom; }
do not overwrite display table , elements. used html table , changed via css blocks. why?
delete this:
.table, thead, tbody, tr, th, td { display: block; }
also can't float table cells.
delete this:
th, td { float: left; width: 25%; }
update: after op stated wants table fixed header , scrollable content suggest following based on requirements. following solution based on original code fixed column widths , column counts. not kind of solutions @ case sufficient.
/* set table layout fixed prevent uneven column widths */ .table { table-layout: fixed; } /* set thead , tbody display block */ .table thead, .table tbody { display: block; } /* enable table layout again each row */ .table tr { width: 100%; display: table; }
full code here: https://jsfiddle.net/zazgh8u9/9/
Comments
Post a Comment