I am struggling with making cells clickable in a table I created with vertical text headings. The table is meant to document file formats used within our system, where currently only the text link is clickable to lead to the documentation. However, I aim to enhance this functionality so that the entire cell becomes clickable and changes background color when hovered over.
.header {
width: 100%;
background-color: White;
overflow-x: auto;
_overflow: auto;
}
table.form a {
color: black;
width: 100%;
height: 100%;
display: inline-block;
text-decoration: none;
}
table.form a:hover {
color: SteelBlue;
}
table.form {
background-color: white;
border-collapse: collapse;
}
table.form th,
table.form td {
border: 1px solid black;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-weight: normal;
min-width: 9px;
}
table.form td {
width: 9px;
text-align: center;
}
th:not(.rotate) {
text-align: left;
}
th.rotate {
vertical-align: top;
text-align: center;
}
...
</pre>
<pre><code>...