Menu
I have a table which should always occupy a certain percentage of the height of the screen. Most of the rows are of fixed height, but I have one row that should stretch to fill the available space. In the event that the contents of a cell in that row overflows the desired height, I'll like the contents to clip using overflow:hidden.
Unfortunately, tables and rows do not respect the max-height property. (This is in the W3C spec). When there is too much text in the cell, the table gets taller, instead of sticking to the specified percentage.
I can get the table cell to behave if I specify a fixed height in pixels for it, but that defeats the purpose of having it automatically stretch to fill available space.
I've tried using divs, but can't seem to find the magic formula. If I use divs with display:table, :table-row, and :table-cell the divs act just like a table.
Any clues on how I can simulate a 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> 
888
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.
To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.
To specify Table width and height, use CSS width, height properties. Here the table width as 30% and height of the td set to 40px.
Just put the labels in a div inside the TD and put the height and overflow.. like 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
