How do I conditionally set height of <td> accounting for amount of data in it when Ajax builds the table?

I build a table using Ajax/PHP/MySql. In the table one column is for comments, sometimes the comments are quite long but I don't want to show all of them because it distorts the table look so I set it up like this;

echo ("<td id="comments:$row[recordID]">
<div class='scrollable'> $row[comments] </div> </td>");


And the CSS is;

div.scrollable
width: 100%;
height: 75px;
margin: 0;
overflow: auto;



The problem is the height of the cell is locked at 75px because of the div on the CSS, but if the cell is empty I want it set to its default, not that imposed by the div.scrollable CSS.
I tried using 'inherit' for the height, but that of course cancels out the overflow and defaults the height to show everything in the cell.
What do I have to do to get an empty cell to have the same height as the other columns in the table, but not make all the other cells in the row its height?

1 Answer
1

Simply set the class if the comment is empty.

$class = empty($row[comments]) ? 'nonscrollable' : 'scrollable' ;
echo ("<td id="comments:$row[recordID]">
<div class='$class'>$row[comments]</div> </td>");


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.