Why won't my table shrink below 170px in height? - html

Question

I have the following code:
#superheader {
width: auto;
height: 100px;
position: relative;
}
#superheader p {
font-family: Sansation;
font-size: 50px;
}
#superheader table {
border: solid;
height: 100px;
}
#header {
height: 140px;
box-shadow: 0em 0.5em 0.5em grey;
position: relative;
background-color: #E6E6E6;
padding-left: 70px;
padding-right: 70px;
font-family: sans-serif;
}
.menuelement {
width: 100px;
height: 40px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
float: left;
position: relative;
}
.menuelement:hover {
background-color: dimgrey;
}
#header>a {
line-height: 2.5;
}
<div id="header">
<div id="superheader">
<div style="margin: auto; width: 630px;">
<table>
<tr>
<td><img src="images/memoji.png" width="100px" height="100px" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
</div>
</div>
<a href="template.html">
<div class="menuelement">Page1</div>
</a>
<a href="index.html">
<div class="menuelement">Page2</div>
</a>
<a href="not_found.html">
<div class="menuelement">Page3</div>
</a>
</div>
The table in this example should be 100px in height, however it won't get smaller than 170px.
Where is my mistake?

Answer 1

Well, actually you can't control height or width of the elements with display: table; because by default if their cells height or width is larger than the height or width of the element with display: table; the element will grow. So you need to control the dimension of the cells instead of the table itself.
In your particular case, there are two approaches to overcome this situation.
Controlling the cells: since you used p tag in your table and this tag has a default margin of 1em on top and bottom you can simply override it and because the inner cells are no longer larger than the table itself you can control its dimensions (As long as they do not smaller than cells). Also, keep in mind the font-size and line-height will make your cells bigger than usual, but if you want to keep them as it is, you should drop the default margin.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
Using display: block;: You can simply override the display of the table and make it work as block but you still need to control the inner elements to do not override the table itself. Also, keep in mind you should control the width of the table also because block element by default will fill the available space.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
display: block;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>

Answer 2

Add the border-spacing: 0px; to your table style to remove spaces between cells:
#superheader table{
border: solid;
height: 100px;
border-spacing: 0px;
}
and then remove white spaces inside cells:
td, td *{
display: table-cell;
margin: 0px;
padding: 0px;
}