CSS를 사용하여 테이블의 행과 열을 어떻게 강조할 수 있나요?

열, 열 그룹 및 행에 대한 CSS 강조 표시로 대화형 테이블 향상

하이 테이블은 일반적으로 복잡한 데이터 구성을 표시하도록 설계되었으며 특정 섹션을 시각적으로 강조 표시하면 사용자 이해력이 향상됩니다. 전통적으로 :hover 의사 클래스는 테이블 셀과 같은 단일 요소에 적용됩니다. 그러나 CSS를 사용하여 이 기능을 그룹 요소(예: 열 또는 행)로 확장할 수 있습니다.

:before 및 ::after 의사 요소 사용

:을 활용하여 의사 요소 앞과 :: 뒤에 강조 표시는 선택한 요소 너머에 적용될 수 있습니다. 이러한 요소는 본질적으로 상위 요소를 기준으로 배치할 수 있는 가상 요소를 생성합니다.

행과 열에 강조 표시 적용

행과 열에 강조 표시를 적용하려면 다음 단계를 사용하세요.

• 행과 열 모두에 대해 ::before 및 ::after 의사 요소를 만듭니다.
• 배경과 함께 스타일을 지정합니다. 색상을 사용하여 강조 표시를 나타냅니다.
• 절대 위치 지정 및 오버플로를 사용하여 강조 표시가 셀 경계를 넘어 확장되도록 합니다.
• 선택적으로 사용자 정의를 위해 행과 열 강조 표시를 구별하는 클래스를 추가합니다.

예시 구현

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

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 class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</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:

이 접근 방식은 다음을 위한 유연하고 사용자 정의 가능한 솔루션을 제공합니다. 표의 행과 열을 강조 표시합니다.

위 내용은 CSS를 사용하여 테이블의 행과 열을 어떻게 강조할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!