css 专注于完整 table

Question

我想在选中时聚焦完整 table，但是当我单击 table 时聚焦不起作用。

所以我尝试将鼠标悬停在 table 上，鼠标悬停正常。我怎样才能集中整个table？

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

您可以将 tabindex 添加到您的 table（在 HTML 中）。设置 tabindex="0" 将其置于自然的 Tab 顺序或 tabindex=-1 使其可聚焦，但不是您可以 Tab 的东西到。 tabindex=1 将强制它成为 Tab 顺序中的第一件事..

就像这里一样：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>

和

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;
}

您可以在此处阅读有关 tabindex 的信息：http://www.w3schools.com/tags/att_global_tabindex.asp

Answer 2

<a>s、<button>s、<input>s 和 textareas 默认情况下都具有 :focus 状态，但您可以为 [= 中的任何元素赋予焦点状态19=]。 contenteditable 和 tabindex 属性都适用于此，如本例所示：

<table contenteditable tabindex="1">  
  <thead>
    <tr>
      <th>Option 1</th>
    </tr>
  </thead>
  <tbody>    
    <tr>
      <td>Me</td>
    </tr>
  </tbody>
</table>

Codepen here

css 专注于完整 table

css focus on a full table

css

focus

hover