如何获取链接标记以获取表格单元格中的所有空间？

Question

p{ 
 
    margin:0; padding:0; 
 
} 
 

 
.table { 
 
    display:table; 
 
} 
 

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

 
.value, .header { 
 
    display:table-cell; 
 
    white-space:nowrap; 
 
} 
 

 
.value a, .header { 
 
    padding:10px; 
 
} 
 

 
.value a { 
 
    background-color:#9a9; 
 
    display:block; 
 
} 
 

 
.spacer { 
 
    width:100%; 
 
}

<h1> 
 
My Fruit Stores 
 
</h1> 
 
<div class="table"> 
 
    <div class="headers"> 
 
     <div class="header"> 
 
      <p>Name</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Money</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Employees</p> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 1</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$1,800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">16</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#"></a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 2</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">6</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#"></a> 
 
     </div> 
 
    </div> 
 
</div>

我还没有得到这个链接标记为占用所有的表格单元格的空间。

这里的想法是，整个行将链接到相同的地方。我需要表格占用其容器的宽度，这就是为什么我需要这个'.spacer'div。

因此，在我的示例中，您可以单击表格行上的任意位置以访问有关该行所代表的商店的页面。

感谢。

编辑：更清楚的是，问题最明确的是有目的地使用空的.spacer项目，用于填充表格行右侧的剩余空间。如果您查看最后一个表格单元格项目，则可以看到它的高度与其余表格单元格的高度不同。我想要最后一个'.spacer'项目来填充所有的空间，所以它看起来像一个适当的表。

Answer 1

可以空锚标记中添加一个空白 并设置text-decoration: none为.space a CSS选择

p{ 
 
    margin:0; padding:0; 
 
} 
 

 
.table { 
 
    display:table; 
 
} 
 

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

 
.value, .header { 
 
    display:table-cell; 
 
    white-space:nowrap; 
 
} 
 

 
.value a, .header { 
 
    padding:10px; 
 
} 
 

 
.value a { 
 
    background-color:#9a9; 
 
    display:block; 
 
} 
 

 
.spacer { 
 
    width:100%; 
 
} 
 

 
.spacer a{ 
 
    text-decoration: none; 
 
}

<h1> 
 
My Fruit Stores 
 
</h1> 
 
<div class="table"> 
 
    <div class="headers"> 
 
     <div class="header"> 
 
      <p>Name</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Money</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Employees</p> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 1</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$1,800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">16</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#">&nbsp;</a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 2</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">6</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#">&nbsp;</a> 
 
     </div> 
 
    </div> 
 
</div>

或者，也可以内spacer设置a到position:absolute并设置其height & width至100％如下

p{ 
 
    margin:0; padding:0; 
 
} 
 

 
.table { 
 
    display:table; 
 
} 
 

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

 
.value, .header { 
 
    display:table-cell; 
 
    white-space:nowrap; 
 
} 
 

 
.value a, .header { 
 
    padding:10px; 
 
} 
 

 
.value a { 
 
    background-color:#9a9; 
 
    display:block; 
 
} 
 

 
.spacer { 
 
    width:100%; 
 
    position: relative; 
 
} 
 

 
.spacer a{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
}

<h1> 
 
My Fruit Stores 
 
</h1> 
 
<div class="table"> 
 
    <div class="headers"> 
 
     <div class="header"> 
 
      <p>Name</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Money</p> 
 
     </div> 
 
     <div class="header"> 
 
      <p>Employees</p> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 1</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$1,800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">16</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#"></a> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="value"> 
 
      <a href="#">Store 2</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">$800</a> 
 
     </div> 
 
     <div class="value"> 
 
      <a href="#">6</a> 
 
     </div> 
 
     <div class="value spacer"> 
 
      <a href="#"></a> 
 
     </div> 
 
    </div> 
 
</div>