计算包含元素的宽度时包含边框

Question

据我所知，绝对定位元素的宽度和高度是在不考虑父级边界的情况下计算的。

是否可以选择基于百分比的尺寸以包含边框？

在下面的示例中，我希望div完全覆盖表格。 仅当我删除边框时，它才有效：

https://jsfiddle.net/yrubm1do/16/

* {
  box-sizing: border-box;
}

table {
  width: 100%;
  height: 100%;
  background: white;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  position: relative;
}

# Target is a div inside td. 
.target {
  background: red;
  position: absolute;
  # Should be 6 times a height of a parent
  # but borders are ignored when the value is calculated 
  top:-600%; 
  bottom: -600%;
  left: -600%;
  right: -600%;
  z-index: 1;
  opacity: 0.5;
}

Answer 1

只需将元素相对于表格定位，就可以轻松地做到这一点。将postion:relative;移至表格而不是td。无论目标元素在表中如何，这也将起作用：

* {
  box-sizing: border-box;
}

table {
  width: 100%;
  height: 100%;
  background: white;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}
table {
  position:relative;
}

.target {
  background: red;
  position: absolute;
  top:0;
  bottom:0;
  left: 0;
  right:0;
  z-index: 1;
  opacity: 0.5;
}

<table>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td class=".target-td">*<div class="target"></div></td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
<tr>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
  <td>*</td>
</tr>
</table>