I am making a user interface where I need to highlight a cell in a table. I have already used coloring for something else, so I need to use the borders. I have created the css to change the borders to dashed, but that doesn't highlight much. I would like to know if there is any way to animate the borders so that they would flash, or circle (typical dashed border animation). I tried with @keyframes and animation, but failed miserably.
I am happy to do it with javascript do it, but I can't use jQuery or any other framework.
If anyone has any other suggestion for highlighting a cell, that could help too.
A test code I use is this:
<table class="t">
<tr>
<td class="t">1</td>
<td class="t top">2</td>
<td class="t">3</td>
</tr>
<tr>
<td class="t left">4</td>
<td class="t middle">5</td>
<td class="t right">6</td>
</tr>
<tr>
<td class="t">7</td>
<td class="t bottom">8</td>
<td class="t">9</td>
</tr>
</table>
CSS:
table.t {
border-collapse: collapse;
border:1px;
table-layout:fixed;
}
td.t {
border: 1px solid black;
width: 50px;
}
td.top {
border-bottom: 1px dashed black;
}
td.left {
border-right: 1px dashed black;
}
td.right {
border-left: 1px dashed black;
}
td.bottom {
border-top: 1px dashed black;
}
td.middle {
border: 1px dashed black;
}
Jsfiddle available HERE