집 > 기사 > 웹 프론트엔드 > 순수 CSS를 사용하여 테이블 고정 열과 테이블 헤더 사이의 가로 스크롤을 구현하는 방법의 예

순수 CSS를 사용하여 테이블 고정 열과 테이블 헤더 사이의 가로 스크롤을 구현하는 방법의 예

巴扎黑원래의: 2017-09-14 09:39:032302검색

이 글에서는 순수 CSS를 사용하여 테이블 고정 열과 테이블 헤더, 중간에 가로 스크롤을 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글에서는 샘플 코드를 통해 이 효과를 구현하는 아이디어와 방법을 자세히 소개합니다. . 학습이나 작업에는 특정 참고 학습 가치가 있어 도움이 될 것입니다. 필요한 친구는 아래를 살펴보세요.

머리말

최근 작업 중인 백그라운드 관리 시스템은 많은 수의 테이블을 처리해야 합니다. 원래 프로젝트는 for 루프와 연결 문자열을 사용하여 구현되었기 때문에 많은 js 코드가 발생했기 때문입니다. 작은따옴표와 큰따옴표 중첩이 골치아팠기 때문에 vue.js가 템플릿 렌더링에 사용되었습니다. 작업량이 갑자기 많이 줄어들었고 텍스트가 강제로 줄바꿈되었습니다.

개별 테이블로 인해 텍스트가 뭉쳐서 아래로 내려가는 장면이 너무 많아서 줄 바꿈을 강제하지 않는 방식을 채택합니다

<style>
p{
     white-space: nowrap;//强制不折行
}
</style>

새로운 문제는 강제로 적용한 후입니다. 줄 바꿈, 전체 너비가 본문을 초과합니다

표의 중요한 열은 고정되어 있습니다. 가로 스크롤 막대를 사용하여 가운데로 드래그하세요.

<style>
p{
    white-space: nowrap;
    overflow: hidden;//控制溢出隐藏
    overflow-x: scroll;//设置横向滚动条
}
</style>

열을 고정해야 한다는 점을 고려하여, 테이블을 분할해야 하며 부동 소수점을 사용하여 테이블을 복원할 수 있습니다. 다음 경우 테이블을 3개로 분할한 다음 부동 소수점으로 복원합니다.

<style>
    p{
        width: 100%;
        white-space: nowrap;
    }
    table td{
        border: 1px solid #000;
    }
    .tab1{
        width: 20%;
        float: left;
    }
    .tab2{
        width: 70%;
        float: left;
        overflow: hidden;
        overflow-x: scroll;
    }
    .tab3{
        width: 10%;
        float: left;
    }
</style>
<body>
<p>
    <table class="tab1">
        <thead>
        <tr>
            <th>首列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>首列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab2">
        <thead>
        <tr>
            <th>中间列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>中间列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab3" >
        <thead>
        <tr>
            <th>尾列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>尾列</td>
        </tr>
        </tbody>
    </table>
</p>
</body>

위 사례가 완성되었습니다

한 가지가 더 있습니다. 중간 테이블의 헤더도 고정해야 하며 아래의 tbody와 함께 슬라이드할 수 없습니다. 여기서 채택한 아이디어는 위치 지정을 사용하는 것입니다. 위의 내용은 모두 백분율로 수행되었으므로 위치 지정의 왼쪽 값도 여기서는 수행하지 않습니다.

위 내용은 순수 CSS를 사용하여 테이블 고정 열과 테이블 헤더 사이의 가로 스크롤을 구현하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：동일 출처 및 교차 도메인 프런트엔드 인터뷰에 대한 자세한 소개다음 기사：동일 출처 및 교차 도메인 프런트엔드 인터뷰에 대한 자세한 소개