如何使整行的表格在css中可點擊？

Question

如果我有下面的代碼，我會添加什麼來使行可點擊作爲鏈接？ （溫柔我是新來這個）我已經嘗試了幾件事情，但我很新，所以我很努力得到它的權利：

.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 &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; 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 &amp; RESEARCH <span style="float: right;">►►</span></strong></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

HTML有兩種基本類型的元素，內聯元素和塊元素。 如果你想知道更多關於它，只需read here。

因爲他們<a>標籤屬於內聯元素的類，它不會填充整個表格單元格。訣竅是將anker標籤與鏈接轉換爲塊元素：

a { 
    display: block; 
} 

現在，anker將填充完整的單元格。 下面你會找到關於這個解決方案如何工作的代碼示例。

---

我有兩個額外的建議供您作爲初學者：

使用非標準字體的

請小心，如果你使用的是不同尋常的字體像tradegothic，未安裝一臺電腦。如果一個網站的訪問者沒有在他的機器上安裝這種字體，他會在他的網頁瀏覽器的默認字體中看到你的網站。

如果您想使用自定義字體，請read here。

如果沒有必要

不要使用表使用一個表來顯示的導航或其它非表數據是mostly considered as a bad style of code。

下面你會發現不使用html表格的exakt相同的導航框。這段代碼可以被認爲是更乾淨。

.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 &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE</a></li> 
 
    <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li> 
 
    <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; 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 &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; 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 &amp; RESEARCH <span style="float: right;">►►</span></a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

，如果我理解正確的您需要創建類似的圖片，我uploade：

爲了創建你需要把在href =「信息」標籤內：

enter code here 

<tr class="clickable-row"> 
<td colspan="3"><strong><a href="/mathdept.ucr.edu">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td> 
</tr>