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>

如何使td电池足够高以容纳内容

1 个答案: