Bren Bren - 4 months ago 24
CSS Question

Vertical alignment within thead in table with scrolling tbody

I have a table header where some

th
values wrap and some do not, resulting in some floating to the top. I can't seem to align all the values, and the border, to the bottom of the header.

Working code here: JSFiddle

I tried the following, but it had no effect:

th {
vertical-align: bottom;
}

Answer

Do not overwrite display for table and its elements. You used HTML table and then changed it via CSS to blocks. Why?

Delete this:

.table,
thead,
tbody,
tr,
th,
td {
    display: block;
}

Also you can't float table cells.

Delete this:

th,
td {
    float: left;
    width: 25%;
}

UPDATE: After OP stated he wants table with fixed header and scrollable content I suggest following based on his requirements. The following solution is based on original code with fixed column widths and column counts. I do not like this kind of solutions but at this case it is sufficient.

/* Set table layout to fixed to prevent uneven column widths */
.table {
    table-layout: fixed;
}

/* Set the thead and tbody only to display block */
.table thead, .table tbody {
    display: block;
}

/* Enable table layout again for each row */
.table tr {
    width: 100%;
    display: table;
}

Full code here: https://jsfiddle.net/zazgh8u9/9/