0

I have created a scrollable table that I want to use in jsfiddle but I cannot get the table cells to have a fixed height or max height. You will probably need to shrink your browser width to see what I am talking about when looking at my example here:

https://jsfiddle.net/trleithoff/jz62aenk/5/

table, tr td {
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 30px;
    height: 30px;
}
tbody {
    display: block;
    height: 125px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

In the first table cell (row 1 column 1) there is too much text and the ellipsis is working but it is working per line and not the entire text block. Does anyone know how to force a fixed height on a table cell?

enter image description here

FairyQueen
  • 2,283
  • 7
  • 37
  • 57
  • https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell does this help? – Ali Beyit Jan 14 '20 at 16:00
  • I am able to set the table cell width I am just not able to set the height. Do you know how to set the height?? – FairyQueen Jan 14 '20 at 16:05
  • About your question: Within a row, a table-cell takes up the space it needs to display the content. The height of all cells in that row will follow the height of the cell with the largest height. This means that you can't give cells in that row less height without hiding the overflow of the cell with the most content. That said, it's best to use an wrapper element (for example a `div`) in you table cell with a fixed height and `overflow: hidden;` . Also remove in your css the display properties at table, thead, tbody, th, td. – bron Jan 14 '20 at 16:39

1 Answers1

1

table-cells won't work with overflow: hidden. Just wrap content in table-cell in div with max-height and overflow: hidden

tbody tr td div{
  max-height: 30px;
  overflow: hidden;
}
sonic
  • 1,282
  • 1
  • 9
  • 22