表格單元格全尺寸單擊

當您將鼠標懸停在框上時，表格單元格會改變顏色，我還需要使框完全可點擊，而不是僅改變中間的文本而不更改框的高度和寬度。我用標籤包裹了我的div，但無濟於事。表格單元格全尺寸單擊

div.container { 
 
    display: table; 
 
} 
 
div.column { 
 
    display: table-cell; 
 
    height: 100px; 
 
    width: 100px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    background-color: #c2ad80; 
 
} 
 
div.column a { 
 
    color: white; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
div.column:hover { 
 
    background-color: #a2884f; 
 
}

<div class="container"> 
 
    <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Design</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Build</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Deploy</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Test</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a> 
 
    </div> 
 

 
</div>

來源

2015-08-14 Davington III

你爲什麼不使用'

單曲？另外，如果你真的想增加表格，你會錯過「display：table-row」的元素。 – Joshua

@Joshua - 也許是因爲那不是表格數據，我們在2000年左右停止使用表格進行佈局。 – j08691

@Joshua這是一個IE8瀏覽器，我認爲它不支持HTML5 –

回答

您需要添加display:block的鏈接 - 否則width和height不允許有任何影響，因爲a是一個內聯元素。

（然後你可能要添加line-height:100px爲好，仍具有垂直居中的鏈接的文本內容。）

來源

2015-08-14 14:05:30 CBroe

添加display屬性<a>有兩種block或inline-block，作爲行內元素不有盒子模型。

div.container { 
 
    display: table; 
 
} 
 
div.column { 
 
    display: table-cell; 
 
    height: 100px; 
 
    width: 100px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    background-color: #c2ad80; 
 
} 
 
div.column a { 
 
    color: white; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
div.column:hover { 
 
    background-color: #a2884f; 
 
}

<div class="container"> 
 
    <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Design</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Build</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Deploy</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Test</a> 
 
    </div> 
 
    <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a> 
 
    </div> 
 

 
</div>

來源

2015-08-14 14:06:57

div.column a { 
    color: white; 
    font-family: Arial; 
    font-size: 12px; 
    text-decoration: none; 
    height: 100px; 
    width: 100px; 
    display: block; //add display:block; since Anchor tags <a> are inline elements. 
}

來源

2015-08-14 14:09:17 user5173426

有更簡單的解決

div.container { 
 
    display: table; 
 
} 
 
div.container a { 
 
    display: table-cell; 
 
    height: 100px; 
 
    width: 100px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    background-color: #c2ad80; 
 
    color: white; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
} 
 
div.container a:hover { 
 
    background-color: #a2884f; 
 
}

<div class="container"> 
 
    <a href="https://www.google.co.uk">Solution Assessment</a> 
 
    <a href="https://www.google.co.uk">Design</a> 
 
    <a href="https://www.google.co.uk">Build</a> 
 
    <a href="https://www.google.co.uk">Deploy</a> 
 
    <a href="https://www.google.co.uk">Test</a> 
 
    <a href="https://www.google.co.uk">Live (BAU)</a> 
 
</div>

來源

2015-08-14 14:14:33 Cheslab

我拿出解決方案已經要求在辦公室的另一個BOD。

CSS改變

div.column a { 
    color:white; 
    font-family: Arial; 
    font-size: 12px; 
    text-decoration:none; 
    display:block; 
    height:100px; 
    width:100px; 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2015-08-14 14:17:21

我添加了這個顯示：table-cell和verticle-align：middle這個修復了這個問題！ –

相關問題