Как сжать ячейку таблицы, чтобы она соответствовала высоте содержимого?

Question

Я уже пробовал некоторые из решений, предоставляемых этим сайтом, но, по-видимому, никто из них не работал для меня. Поэтому я думал, что отправлю это как еще один вопрос.

У меня есть эта таблица, содержащая кнопки, которые я создал с помощью CSS.

Я не устанавливал высоту и ширину стола, поэтому он должен настраиваться в соответствии с его содержанием. Проблема в том, что этот «пробел» ниже кнопок, как видно из изображения, и я не могу найти способ удалить это. Я также пытался установить каждую высоту ячейки, но она не сработала.

я это для кнопки

.arrow 
{ 
background-color:#78E9DE; 
box-shadow: 0px 4px 0px 0px #45C3B8; 
border-radius: 5px; 
color: white; 
border: none; 
font-size: 30px; 
}; 

и простой HTML таблицы

<table> 
<tr> 
    <td></td> 
    <td>[up button here]</td> 
    <td></td> 
</tr> 
<tr> 
    <td>[left button here]</td> 
    <td></td> 
    <td>[right button here]</td> 
</tr> 
<tr> 
    <td></td> 
    <td>[down button here]</td> 
    <td></td> 
</tr> 
</table> 

Я хочу соответствовать каждую клетку с содержимым внутри, так что это будет выглядеть красиво и проще нажать. Пожалуйста, помогите спасибо.

Answer 1

попробовать это:

table { 
 
    border-collapse: collapse; 
 
} 
 
table,td { 
 
    padding: 0; 
 
} 
 
img { 
 
    display: inherit; 
 
}

и вот результат: