-1
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'項目來填充所有的空間，所以它看起來像一個適當的表。
因此，如果有人點擊$ 1,800個或16個，他們應該去同一個地方嗎？ （因爲他們在同一行） – Pat
@Pat是啊，現在回頭看，這與我實際需要幫助的事無關。他們應該能夠點擊行中的任何空格來使用該行的鏈接。這就是爲什麼我有鏈接元素佔據了所有空間。問題是我在該行中使用的最後一項是空的，因爲我需要它填充右側的其餘區域。但正如您在示例中看到的那樣，最後一項不會佔用它應該佔用的所有空間，您可以看到它的高度與其他表格單元不同。 –