How to outline table column using JS/CSS/HTML - html

Question

I need to select a table column on click. To show selection, I need to outline the table column.
I managed to outline each in the column needed, see pic:
However, that doesn't suit me: I need to get rid of inner lines.
CSS (actually, LESS) I currently use:
td.fd-selected
{
outline: 0.25em dashed rgb(79,115,176);
background-color: rgba(79,115,176, 0.25);
}

Answer 1

Unfortunately you can't do it with outline. outline is basically used to highlight a focused element in its entirety (mostly form elements). In its default setting, it uses the outline provided either by the operating system or the web browser itself (IE as example for the former, Chrome as example for the latter).
The only reliable (and the least hacky) solution is, to use borders.
Here's how (logic):
Place left and right borders to all cells.
Place top border to the appropriate cell of the first row
Place bottom border to the appropriate cell of the last row
The example below also shows, how you could highlight the header too.
Example
table{
border-collapse: collapse;
}
th {
background-color: #efefef;
}
th, td {
width: 60px;
height: 30px;
border: 1px solid #ccc;
}
td.outline {
border-left: 2px dotted #06c;
border-right: 2px dotted #06c;
}
tr:first-child > td.outline {
border-top: 2px dotted #06c;
}
tr:last-child > td.outline {
border-bottom: 2px dotted #06c;
}
/*how could it look like with the header*/
th.outline {
background-color: #99ccee;
border: 2px dotted #06c
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th class="outline"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="outline"></td>
<td></td>
</tr>
</tbody>
</table>