순수 CSS를 사용하여 테이블 고정 열과 테이블 헤더 사이의 가로 스크롤을 구현하는 방법의 예-CSS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-09-14 09:39:03

원래의

2405명이 탐색했습니다.

이 글에서는 순수 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>

로그인 후 복사

위 사례가 완성되었습니다