How to get td cell to be high enough to hold contents - css

Question

Browser does not display td with enough space to hold contents
I have a table cell whose content is a styled a tag. The height of the styled a tag is 29px high, but the content-height attribute of the td cell is 19px, that is the value of line-height for the font that is in use. I see this in the Firefox inspector. The styled a tag is higher than simple text because it has padding and borders. I do not understand why the browser has not included the padding and borders of the content in calculating the height and width of the td tag that is intended to hold the content. I do not want to explicitly set the height of the td in case I later change the style for the a tag. I cannot find any documentation of how the td, or any box, calculates the height of the content-area.
td.odd {
font-family: sans-serif;
background-color: #F8F8F8;
border-right: thin solid black;
border-bottom: thin solid black;
padding: 2px 2px 2px 2px;
empty-cells: show;
}
td.left {
text-align: left;
float: none;
}
td.center {
text-align: center;
float: none;
}
td.right {
text-align: right;
float: none;
}
a.button {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
text-align: center;
text-decoration: none;
background-color: #E0E0E0;
color: #000000;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 3px solid #606060;
border-right: 3px solid #606060;
padding: 4px 12px 4px 12px;
}
<tr id="location">
<td class="odd right">
<a href="Location.php?id=$IDLR&lang=$LANG" class="button">
Details
</a>
</td>
<td class="odd left">
$LOCATION
</td>
<td class="odd center">
$LOCPRESENT
</td>
<td class="odd center">
$NOTESPRESENT
</td>
<td class="odd center">
$BOUNDPRESENT
</td>
</tr>
An example of the page that is not displaying to my satisfaction is https://www.jamescobban.net/FamilyTree/Locations.php?pattern=%5EZephyr&namefld=
Note how the "button" in the first cell does not fit in the containing table cell.
I would expect the size of the content-area in the td to match the size of the actual element contained in the td. Instead the td is using some fictional element which is only the height of the text.

Answer 1

This is due to the display mode of the content of the cell. <a> elements display inline by default, so their height will be treated as the line height. In your example, try adding display: block or display: inline-block to the a.button rule.
Demo:
table, th, td {
border: 1px solid black;
}
.button {
background: #ddd;
padding: 5px;
border: 2px solid black;
}
.block {
display: block;
}
<h4>Bad Table:</h4>
<table><tr>
<td><a class="button">Button A</a></td>
<td>Another Cell 1</td>
</tr><tr>
<td><a class="button">Button B</a></td>
<td>Another Cell 2</td>
</tr></table>
<h4>Good Table:</h4>
<table><tr>
<td><a class="button block">Button A</a></td>
<td>Another Cell 1</td>
</tr><tr>
<td><a class="button block">Button B</a></td>
<td>Another Cell 2</td>
</tr></table>