enter image description here

enter image description here

I am trying to create a chat on the server and this problem has arisen: when deleting rows from a table, the size of the cells changes relative to the table itself. How to make a fixed cell size, so that when other cells are removed, they remain the same height?

.tab2{ vertical-align: bottom; padding-left: 10px; width: 880px; height: 710px; } .trMessage{ max-height: 24px; } .message{ width: 870px; height: 24px; padding-bottom: 4px; border-bottom:1px solid; border-color: rgba(128, 128, 128, 0.31); } 
  <table class="tab2"> <?foreach ($messages as $key => $value) {?> <tr class="trMessage"> <td class="message"> <?echo $value['date']?> <?echo $value['user']?>: <?echo $value['text']?> <br /> </td> <td> <?if(checkPrivilege($_SESSION['user'])){?> <form method="post" class="deleteform"> <input type="hidden" name="messageid" value="<?=$value['id']?>" /> <input type="submit" name="delete" class="deleteButton" value="x" onclick="getValue(messageid)" /> </form> <?}?> </td> </tr> <?}?> </table>

  • inside td put div - olegatro

3 answers 3

try removing height .tab2 (remove height: 720px;)

  • Thank! Removed the height of the table, everything worked fine. - John Fekoter

Try not to set a fixed height for the cell, but limit it to the height. .message { max-height: 15px; } .message { max-height: 15px; } .

  • Randomly sent the wrong piece of code. I set the height of .message, but it did not help. - John Fekoter
  • corrected the answer - Dmitriy Kondratiuk

Inside the cells, you can arrange a div and assign a fixed height to it.

 <td class="message"> <div class="message-text">Сообщение</div> </td> 
 .message-text { height: 25px; //overflow: hidden; }