css - 如何让 td 单元足够高以容纳内容

Question

浏览器不显示有足够空间容纳内容的 td

我有一个表格单元格，其内容是一个样式标签。样式标签的高度是 29px 高，但是 td 单元格的 content-height 属性是 19px，这是使用的字体的 line-height 值。我在 Firefox 检查器中看到了这个。样式标签比简单文本更高，因为它有填充和边框。我不明白为什么浏览器在计算用于保存内容的 td 标签的高度和宽度时没有包括内容的填充和边框。我不想显式设置 td 的高度，以防我以后更改 a 标签的样式。我找不到任何关于 td 或任何框如何计算内容区域高度的文档。

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&amp;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>

显示不满意的页面示例是 https://www.jamescobban.net/FamilyTree/Locations.php?pattern=%5EZephyr&namefld=

请注意第一个单元格中的“按钮”如何不适合包含表格的单元格。

我希望 td 中内容区域的大小与 td 中包含的实际元素的大小相匹配。相反，td 使用了一些虚构的元素，它只是文本的高度。

Answer 1

这是由于单元格内容的显示方式所致。 <a>元素默认显示为内联，因此它们的高度将被视为行高。在您的示例中，尝试添加 display: block或 display: inline-block到 a.button规则。

演示:

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>