css focus on a full table - css

Question

I want to focus a full table when is selected, but when I click on the table focus is not working.
So I tried hover on the table and hover is working. How can I focus the whole table?
https://jsfiddle.net/bbe7x7bp/1/
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}

Answer 1

You can add tabindex to your table (in the HTML). Set tabindex="0" to put it in the natural tab order or tabindex=-1 to make it focusable, but not something you can tab to. tabindex=1 will force it to be the first thing in the tab order..
Just like here: https://jsfiddle.net/bbe7x7bp/2/
<table class="table" tabindex="1">
<tbody>
<trhead>
<td colspan="7">Some title</td>
</trhead>
<tr class="table-info">
<td>data 1</td>
<td>data 2</td>
<td colspan="5">data something</td>
</tr>
</tbody>
</table>
and
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}
and you can read about tabindex right here: http://www.w3schools.com/tags/att_global_tabindex.asp

Answer 2

<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes work for this, as in this example:
<table contenteditable tabindex="1">
<thead>
<tr>
<th>Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
</tr>
</tbody>
</table>
Codepen here