<table>
  <caption>
    使用 Hover 和 :focus-within 实现表格行高亮效果
  </caption>
  <thead>
    <tr>
      <th scope="col">
        Heading 1
      </th>
      <th scope="col">
        Heading 2
      </th>
      <th scope="col">
        Heading 3
      </th>
      <th scope="col">
        Heading 4
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#!">Content 1 a</a>
      </td>
      <td>
        Content 2 a
      </td>
      <td>
        Content 3 a
      </td>
      <td>
        Content 4 a
      </td>
    </tr>
    <tr>
      <td>
        <a href="#!">Content 1 b</a>
      </td>
      <td>
        Content 2 b
      </td>
      <td>
        Content 3 b
      </td>
      <td>
        Content 4 b
      </td>
    </tr>
    <tr>
      <td>
        <a href="#!">Content 1 c</a>
      </td>
      <td>
        Content 2 c
      </td>
      <td>
        Content 3 c
      </td>
      <td>
        Content 4 c
      </td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-spacing: 0px;
  border: 1px solid;
}

caption {
  text-align: left;
  padding-bottom: .25em;
  font-size: 1.5em;
}

thead th {
  background: #333;
  color: #fff;
}

td,
th {
  padding: .5em;
}
td:not(:last-child),
th:not(:last-child) {
  border-right: 1px solid;
}

tr:not(:last-child) td,
tr:not(:last-child) th {
  border-bottom: 1px solid;
}

tbody tr:first-child td {
  border-top: 1px solid;
}

/*
  Browsers that do not support :focus-within will just ignore this selector group:

tbody tr:focus-within,
tbody tr:hover {
  background: rgba(lightBlue, .4);
}


  So if you want to try focus-within, but need to support browsers where it is not supported yet, break apart the above selector like so:
*/
tbody tr:focus-within {
  background: rgba(173, 216, 230, 0.4);
}

tbody tr:hover {
  background: rgba(173, 216, 230, 0.4);
}

a {
  font-weight: bold;
  color: #000;
}
a:hover, a:focus {
  background: #000;
  color: #fff;
  outline: 4px solid #000;
}

body {
  font-family: Arial;
  padding: 20px 40px;
}