Question

我尝试过一堆搜索，但我似乎无法找到任何答案。我有一个表格，包括表格行，表格单元格，然后是其中的锚点。我希望锚可以拉伸其父表单元格的整个高度，但我似乎无法使其工作。这是一个小提琴：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>

我知道我可以将锚本身设置为表格单元格，这样可以解决问题，但我们必须遵守可访问性标准，这些标准将此表格视为＆＃34; list＆＃34;用＆＃34; listitems＆＃34;它内部和＆＃34;按钮＆＃34;在＆＃34; listitems＆＃34;里面，你可以在我的小提琴中看到。有什么建议吗？

Answer 1

在表格单元格中添加背景以获得完整覆盖率。
在伪类之后使用以扩展整个单元格。由于它是链接的一部分，因此会触发。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

如何在显示内部创建元素：table-cell具有100％高度

1 个答案: