html - 如何在显示 :table-cell have 100% height 中创建一个元素

Question

我尝试了很多搜索，但似乎找不到任何答案。我有一个表格，其中包含表格行、表格单元格，然后是其中的 anchor 。我希望 anchor 拉伸(stretch)其父表格单元格的整个高度，但我似乎无法让它工作。这是一个 fiddle :https://jsfiddle.net/mvqvxxux/1/

<div class="table" role="list">
  <div class="table-row">
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Long text Long text Long text Long text Long text Long text Long text</a>
      </div>
  </div>

  <div class="table-row">
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
  </div>
</div>

我知道我可以使 anchor 本身成为表格单元格，这将解决问题，但我们必须遵守可访问性标准，该标准将此表格视为一个“列表”，其中包含“listitems”和“按钮”在“listitems”里面，你可以在我的 fiddle 中看到。有什么建议吗？

Answer 1

1. 在表格单元格上添加背景以实现全面覆盖。

2. 在伪类之后使用以扩展整个单元格。因为它是链接的一部分，所以它会触发。

.table {
  display: table;
  width:300px;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  width: 50%;
  border:1px solid black;
  position: relative;
  background: #ddd;
}

.anchor {
  display: block;
}
.anchor:hover {
  cursor:pointer;
}
.anchor:after {
  content: "";
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="table" role="list">
  <div class="table-row">
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Long text Long text Long text Long text Long text Long text Long text</a>
      </div>
  </div>
  
  <div class="table-row">
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
      <div class="table-cell" role="listitem">
          <a class="anchor" role="button">Short text</a>
      </div>
  </div>
</div>