📝 代码查看
使用runcode.html页面

2
查看次数
2025-12-04
创建时间
2026-01-30
最后更新
  <table>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <tbody>
      <tr>
        <td>6</td>
        <td> </td>
        <td>5</td>
        <td> </td>
        <td>7</td>
        <td>3</td>
        <td>8</td>
        <td>9</td>
        <td> </td>
      </tr>
      <tr>
        <td>4</td>
        <td>1</td>
        <td>7</td>
        <td>2</td>
        <td> </td>
        <td>9</td>
        <td> </td>
        <td>3</td>
        <td>6</td>
      </tr>
      <tr>
        <td>3</td>
        <td>8</td>
        <td> </td>
        <td>4</td>
        <td>6</td>
        <td>5</td>
        <td>1</td>
        <td> </td>
        <td>2</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>1</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>2</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>8</td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td>8</td>
        <td>4</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>8</td>
        <td> </td>
        <td> </td>
        <td>9</td>
        <td>3</td>
        <td>6</td>
        <td> </td>
        <td>4</td>
        <td> </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>9</td>
        <td>4</td>
        <td>3</td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>2</td>
        <td>5</td>
      </tr>
      <tr>
        <td> </td>
        <td>6</td>
        <td>8</td>
        <td>3</td>
        <td>9</td>
        <td>2</td>
        <td>4</td>
        <td>1</td>
        <td> </td>
      </tr>
      <tr>
        <td>2</td>
        <td> </td>
        <td>1</td>
        <td> </td>
        <td>5</td>
        <td>4</td>
        <td> </td>
        <td>8</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>


table {
  font-family: consolas;
  border-collapse: collapse;
}
select {
  width: 100%;
}

colgroup,tbody {
  border: 3px solid;
}
td {
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid;
}
tr:hover {
  background-color: yellow;
}

table:has(tbody:nth-of-type(1) td:nth-child(n + 1):nth-child(-n + 3):hover) tbody:nth-of-type(1) td:nth-child(n + 1):nth-child(-n + 3),
table:has(tbody:nth-of-type(1) td:nth-child(n + 4):nth-child(-n + 6):hover) tbody:nth-of-type(1) td:nth-child(n + 4):nth-child(-n + 6),
table:has(tbody:nth-of-type(1) td:nth-child(n + 7):nth-child(-n + 9):hover) tbody:nth-of-type(1) td:nth-child(n + 7):nth-child(-n + 9),
table:has(tbody:nth-of-type(2) td:nth-child(n + 1):nth-child(-n + 3):hover) tbody:nth-of-type(2) td:nth-child(n + 1):nth-child(-n + 3),
table:has(tbody:nth-of-type(2) td:nth-child(n + 4):nth-child(-n + 6):hover) tbody:nth-of-type(2) td:nth-child(n + 4):nth-child(-n + 6),
table:has(tbody:nth-of-type(2) td:nth-child(n + 7):nth-child(-n + 9):hover) tbody:nth-of-type(2) td:nth-child(n + 7):nth-child(-n + 9),
table:has(tbody:nth-of-type(3) td:nth-child(n + 1):nth-child(-n + 3):hover) tbody:nth-of-type(3) td:nth-child(n + 1):nth-child(-n + 3),
table:has(tbody:nth-of-type(3) td:nth-child(n + 4):nth-child(-n + 6):hover) tbody:nth-of-type(3) td:nth-child(n + 4):nth-child(-n + 6),
table:has(tbody:nth-of-type(3) td:nth-child(n + 7):nth-child(-n + 9):hover) tbody:nth-of-type(3) td:nth-child(n + 7):nth-child(-n + 9) {
  background-color: yellow;
}


table:has(td:nth-child(1):hover) td:nth-child(1),
table:has(td:nth-child(2):hover) td:nth-child(2),
table:has(td:nth-child(3):hover) td:nth-child(3),
table:has(td:nth-child(4):hover) td:nth-child(4),
table:has(td:nth-child(5):hover) td:nth-child(5),
table:has(td:nth-child(6):hover) td:nth-child(6),
table:has(td:nth-child(7):hover) td:nth-child(7),
table:has(td:nth-child(8):hover) td:nth-child(8),
table:has(td:nth-child(9):hover) td:nth-child(9) {
  background-color: yellow;
}
暂无JavaScript代码

👁️ 实时预览