[英]How do I make an entire row of a table clickable in css?
如果我有以下代碼,我會添加什么來使一行可點擊作為鏈接? (要溫柔我是新手)我嘗試了幾件事,但我對此很新,所以我很難做到正確:
.hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 7px; border: #315795 1px solid; font-family: "tradegothic"; font-size: 14px; color: #315795; } /* Define the default color for all the table rows */ .hoverTable tr { background: #bec7d6; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #315795; color: #ffffff; } /* Define the hover highlight color for the table row */ .hoverTable td:hover { background-color: #315795; color: #ffffff; }
<table class="hoverTable" style="width: 700px;"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><strong><a>CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE<span style="float: right;">►►</span></a><br /></strong></td> </tr> <tr> <td colspan="3"><strong>OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></strong></td> </tr> <tr> <td colspan="3"><strong>SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH <span style="float: right;">►►</span></strong></td> </tr> </tbody> </table>
HTML有兩種基本類型的元素,內聯元素和塊元素。 如果您想了解更多信息, 請閱讀此處 。
因為它們<a>
標簽屬於內聯元素的類,所以它不會填充整個表格單元格。 訣竅是將帶有鏈接的anker標記轉換為塊元素:
a {
display: block;
}
現在anker將填滿整個單元格。 您將在下面找到有關此解決方案如何工作的代碼示例。
作為初學者,我有兩個額外的建議:
使用非標准字體
如果您使用的是像tradegothic
這樣沒有安裝所有計算機的不tradegothic
字體,請注意。 如果網站的訪問者沒有在他的機器上安裝此字體,他將以他的網絡瀏覽器的默認字體看到您的網站。
如果您想使用自定義字體,請閱讀此處 。
如果沒有必要,請不要使用表格
使用表來顯示導航或其他非表數據通常被認為是一種糟糕的代碼風格 。
下面你會發現exakt相同的導航框而不使用html表。 這段代碼可以被認為更干凈。
.nav { width: 700px; /* Define the width of the navigation box */ padding: 0; } .nav li { list-style-type: none; margin: -1px 0 0 0; } /* Define the style of the ankers */ .nav a, .nav a:visited { display: block; border: #315795 1px solid; padding: 7px; font-family: "tradegothic"; font-size: 14px; font-weight: bold; text-decoration: none; color: #315795; background: #bec7d6; } /* Define the hover style for the ankers */ .nav a:hover { background-color: #315795; color: #ffffff; } /* Define the Arrows */ .nav a::after { content: "►►"; float: right; }
<ul class="nav"> <li><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE</a></li> <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li> <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH</a></li> </ul>
表的原始解決方案
如果您出於某種原因更喜歡表格解決方案,那么您將找到固定代碼。
.hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 0; border: #315795 1px solid; } /* Define the style for normal and visited links */ .hoverTable a, .hoverTable a:visited { display: block; padding: 7px; text-decoration: none; font-weight: bold; font-family: "tradegothic"; font-size: 14px; color: #315795; background: #bec7d6; } /* Define the hover style for the links */ .hoverTable a:hover { color: #ffffff; background: #315795; }
<table class="hoverTable"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE<span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH <span style="float: right;">►►</span></a></td> </tr> </tbody> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.