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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -