> 웹 프론트엔드 > CSS 튜토리얼 > `col`, `colgroup` 및 CSS `:hover`를 사용하여 단일 표 셀 이상을 강조 표시할 수 있나요?

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

Patricia Arquette
풀어 주다: 2024-11-08 07:35:02
원래의
787명이 탐색했습니다.

Can I use `col`, `colgroup`, and CSS `:hover` to highlight more than just a single table cell?

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>
로그인 후 복사
a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #FFA; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

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

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿