`col`, `colgroup` 및 CSS `:hover`를 사용하여 단일 표 셀 이상을 강조 표시할 수 있나요?

col, colgroups 및 CSS "hover" 의사 클래스를 단일 셀 이상의 용도로 사용할 수 있습니까?

테이블 행 및 마우스를 올리면 열이 표시되므로 ":hover"와 같은 CSS 의사 클래스를 사용할 수 있습니다. 하지만 단일 셀뿐만 아니라 헤더를 포함한 전체 행이나 열을 강조 표시하려면 어떻게 해야 할까요?

순수한 CSS 솔루션은 ::before 및 ::after 의사 요소를 사용하여 이를 달성할 수 있습니다. 이러한 요소는 각각 선택한 요소 앞과 뒤에 콘텐츠를 추가합니다. 방법은 다음과 같습니다.

1. 강조 요소 만들기:

   • 행 강조 표시에는 ::before를 추가하고 행 강조 표시 뒤에는 ::after를 추가합니다. 관련 요소(예: tr, td, th).
   • 이러한 요소가 어디든 확장될 수 있도록 절대 위치 지정을 사용합니다.
   • 왼쪽/상단에 음수 값을 사용하여 요소 경계 외부에 배치합니다(: :before) 또는 왼쪽/아래(::after).
   • 전체 행/열을 포함하려면 더 큰 너비/높이를 설정하세요.

2. 하이라이트 오버플로 숨기기:

   • 오버플로: 테이블에 숨겨짐을 설정하여 하이라이트 요소가 테이블에서 오버플로되는 것을 방지합니다.
   • 이렇게 하면 하이라이트를 보장하면서 테이블 영역을 깨끗하게 유지합니다. 개별 셀 이상으로 확장됩니다.

3. 행/열 선택기 추가:

   • 현재 행이나 열만 강조 표시하려면, :hover th(헤더) 및 :hover .row / .col(행/열에 대한 클래스 기반 선택기)에서 ::before 및 ::after 요소를 사용합니다.

아래 CSS 코드는 다음 원칙을 구현합니다.

table { overflow: hidden; }
td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; }
td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table>
  <tr>
    <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
  </tr>
  <tr class="row">
    <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
  </tr>
  <tr class="row">
    <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
  </tr>
</table>

HTML은 크게 변경되지 않지만 행과 열의 클래스 이름을 포함합니다.

이 솔루션은 최신 브라우저에서 작동합니다. 전체 행과 열에 호버 강조 효과를 우아하게 적용합니다.

위 내용은 `col`, `colgroup` 및 CSS `:hover`를 사용하여 단일 표 셀 이상을 강조 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!