Best IT Recipes

Setting the maximum height for table cell contents

I have a table that should always occupy a certain percentage of the height of the screen. Most lines have a fixed height, but I have one line that needs to be stretched to fill the available space. If the contents of the cell in this row overflows the desired height, I will like the contents for the clip using overflow: hidden.

Unfortunately, tables and rows do not take into account the max-height property. (This is in the W3C specification). When there is too much text in the cell, the table becomes higher, instead of sticking to the specified percentage.

I can make the table cell behave if I specify a fixed height in pixels for it, but that defeats the goal of auto-stretching to fill the free space.

I tried using divs but can't find the magic formula. If I use divs with display: table ,: table-row and: table-cell, divs act just like a table.

Any tips on how I can simulate the max-height property on a table?

<head> <style> table { width: 50%; height: 50%; border-spacing: 0; } td { border: 1px solid black; } .headfoot { height: 20px; } #content { overflow: hidden; } </style> </head> <body> <table> <tr class="headfoot"><td>header</td></tr> <tr> <td> <div id="content"> put lots of text here </div> </td> <tr> <tr class="headfoot"><td>footer</td></tr> </table> </body>
+38
html css html-table table
Aug 12 '11 at 19:59
source share
7 answers

Finally, we found the answer. Firstly, the problem: the table always has dimensions around the content, and does not make the content fit into the table. This limits your options.

We did this by setting the content of the div: none to display, allowing the table to fit in size, and then in javascript set the height and width of the div content to the internal height and width of the enclosing td tag. Show contents of div. Repeat the process when resizing the window.

+15
Aug 15 '11 at 18:50
source share

Just put the labels in the div inside the TD and set the height and overflow .. as shown below.

 <table> <tr> <td><div style="height:40px; overflow:hidden">Sample</div></td> <td><div style="height:40px; overflow:hidden">Text</div></td> <td><div style="height:40px; overflow:hidden">Here</div></td> </tr> </table>
+47
Aug 04 2018-12-12T00:
source share

I had the same problem with the spreadsheet layout I was creating. I used Joseph Marikl’s solution, but I made it work for FireFox, and added a table style. A pure CSS solution, since using Javascript for this seems completely unnecessary and redundant.

HTML

 <div class='wrapper'> <div class='table'> <div class='table-row'> <div class='table-cell'> content here </div> <div class='table-cell'> <div class='cell-wrap'> lots of content here </div> </div> <div class='table-cell'> content here </div> <div class='table-cell'> content here </div> </div> </div> </div>

CSS

 .wrapper {height: 200px;} .table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;} .table-row {display: table-row; height: 100%;} .table-cell {position: relative; overflow: hidden; display: table-cell;} .cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}

You need a wrapper around the table if you want the table to respect the percentage height, otherwise you can just set the pixel height in the table element.

+3
Jun 16 '16 at 15:47
source share

Maybe not a cross browser, but I managed to get this: http://jsfiddle.net/QexkH/

This basically requires a fixed header and footer. and this is the absolute position of the table.

  table { width: 50%; height: 50%; border-spacing: 0; position:absolute; } td { border: 1px solid black; } #content { position:absolute; width:100%; left:0px; top:20px; bottom:20px; overflow: hidden; }
+2
Aug 12 2018-11-12T00:
source share

What i found !!! In CSS tables, td{height:60px;} works the same as CSS td{min-height:60px;}

I know that a situation where cell height looks bad. This javascript solution does not need overflow.

To limit the maximum height of all cells or rows in a table using Javascript:

This script is good for horizontal overflow tables.

This script increases the width of the table 300 pixels each time (maximum 4000 pixels) until the rows are compressed to a maximum height (160 pixels), and you can also edit the numbers to suit your needs.

 var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth; while (row = table.rows[i++]) { while (row.offsetHeight > 160 && j < 4000) { j += 300; table.style.width = j + 'px'; } }

Source: HTML Table Solution Maximum height restriction for rows or cells by increasing table width, Javascript

+1
Aug 11 '15 at 1:51 on
source share

Another way that may / may not work, but by far the easiest:

 td { display: table-caption; }
+1
Mar 25 '17 at 6:32
source share

I decided to use this plugin: http://dotdotdot.frebsite.nl/

it automatically sets the maximum height of the target and adds three points

0
Feb 25 '16 at 13:09
source share


More articles:


All Articles