0

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;
}
Bren
  • 273
  • 1
  • 18
  • Update the question to reflect all your requirements. Also add to its title that the thead is fixer or tbody is scrollable. I updated my answer to match these conditions. – actimel Jul 25 '16 at 21:15

2 Answers2

-1

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/

actimel
  • 442
  • 6
  • 22
  • I needed those items to accomplish both the scrolling in `tbody` and the alignment of values in `tbody` and `thead`. You'll see that if you delete those items, it completely changes the table. – Bren Jul 25 '16 at 20:39
  • Well it works for the header, but at the expense of everything else. I included the larger table to show all that is needed. Is there another way to accomplish the scrolling then? – Bren Jul 25 '16 at 20:42
  • But you didn't state in you question that you want your thead fixed. It isn't that easy to achive. Try searching around. Never change table display to block. http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody/17380697 – actimel Jul 25 '16 at 20:45
  • Some solutions use display block, but the fixed width of cells is necessary and you will have problems with multiline text. You can use flexbox as alternative or as I once did JS duplicated header with calculated widths to allow dynamic changes of column widths according to number of columns and the content. Your question was answered by returning display default to table-cell. – actimel Jul 25 '16 at 20:54
-1

I will do the long explanation as many here want to get very technical 1) using display: block on the cell causes every cell to go to the next line, however you are also using float with causes the cells to go "inline". Also, floating elements gives them block display. So, there is some redundancy here.

2) if you are trying to accomplish vertical alignment, you can use vertical alignment (this property only works in inline-block or table-cell displays) for any others you have to find other ways.

3) text is wrapping up because you are giving your cells a width. If you don't give the element a height and overflow is not set to hidden then, it will set its height to accommodate all the text after wrapping up if necessary. In this case, you have a couple of options 1) truncate the text with ellipses, let wrap to next line, or to hide the overflow.

Gacci
  • 1,388
  • 1
  • 11
  • 23
  • Apologies, I'm not following. Is one of those last options something I could add to the existing code to fix it? I realize the `display:block` that I've added is throwing me off but it's the only way I could accomplish the needed scrolling in `tbody` – Bren Jul 25 '16 at 20:46
  • When text exceeds the width of an element it will wrap to the next line. Then there two scenarios here: 1) element does not have a set height, in this case, the element's height will be adjusted to whatever is needed to accommodate the text, as text wraps up to the next line. 2) element has height set, then if overflow is set to hidden, element will show as much text as it fits in the dimensions given. If element's height is set and overflow is not set or set to visible the element's dimension will be set but it still show all text. Hope it makes sense! – Gacci Jul 25 '16 at 20:59
  • Thank you. I was at least able to fix the border by adding a height to `th`. Unwrapped text is still positioned at the top rather than bottom but still looks better than before. I expect I need to somehow unwind other styling here but every attempt screws up the scrolling feature – Bren Jul 25 '16 at 21:16
  • @Gacci You just said what happens. You should provide some solution. Your initial solution with white-space: nowrap was not really helpful and answering the question either. I stick to the -1 I gave you originally. – actimel Jul 25 '16 at 21:17
  • Because it depends on what he is looking for. From what I see looks like he wants to keep the header fixed while scrolling tbody. – Gacci Jul 26 '16 at 02:11
  • Explain it. If it is complete nonsense give your arguments, don't just say is wrong! PROVE IT! – Gacci Jul 26 '16 at 14:22