CSS는 테이블의 특정 행을 수정하도록 설정합니다.

CSS로 고정할 테이블의 특정 행을 설정하는 방법: 1. CSS를 사용하여 th의 위치를 ​​지정하고 상위 스크롤 막대 스크롤탑의 오프셋을 기반으로 값을 가져온 다음 js를 사용하여 오프셋을 2번째 상단 위치 지정, jq 플러그인을 사용하여 고정할 테이블의 특정 행을 설정합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS로 테이블의 특정 행을 고정하는 방법은 무엇입니까?

CSS로 테이블의 특정 행을 고정하는 방법은 무엇입니까? 다음 글에서는 CSS를 사용하여 고정할 테이블의 첫 번째 행(헤더)을 설정하는 방법을 소개합니다.

1. CSS + js를 사용하여 테이블 헤더 고정

CSS를 사용하여 상위 스크롤 막대 스크롤탑의 오프셋을 기반으로 값을 가져오고 js를 사용하여 위치 지정 상단에 오프셋을 할당합니다. 일. 미터 헤드는 고정되어 있습니다. (이 방법은 고정 높이가 필요합니다.)

권장: "css 비디오 튜토리얼"

project 데모

css 스타일 부분은 주로 스크롤바, 위치 지정 및 높이 고정을 보여줍니다.

<style>
.table-responsive {
    overflow: auto !important;
}
.table-th-css {
    background: #EFEFF4 !important;
    position: relative !important;
    text-align: center;
    top: 0;
}
.section-scroll{
height:417px;
}
</style>

html 부분 직접 만들면 분명 내용이 많을 테니 데모용으로 내용을 많이 복사하지는 않겠습니다.

<div class="table-responsive section-scroll">
<table class="table table-bordered">
<thead class="table-header">
<tr>
                        <th class="table-th-css">
                            <div>部门</div>
                        </th>
                        <th class="table-th-css">
                            <div>用户名称</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>1月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>2月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>3月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>4月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>5月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>6月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>7月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>8月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>9月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>10月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>11月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>12月</div>
                        </th>
                        <th class="text-center table-th-css">
                            <div>合计</div>
                        </th>
</tr>
</thead>
<tbody >
<tr class="text-center" >
                        <td >
                            西门庆
                        </td>
                        <td class="table-textWidth">
                            西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                           西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                           西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                           西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                           西门庆
                        </td>
                        <td>
                           西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
                        <td>
                            西门庆
                        </td>
</tr>
</tbody>
</table>
</div>

js 콘텐츠 jq의 on 이벤트를 사용하여 스크롤을 모니터링하고 내 프로젝트 스타일에 따라 내 스타일을 수정합니다. 누구나 스스로 조정할 수 있습니다.

var tableCont = $('.section-scroll tr th'); //获取th
var tableCont_child = $('.section-scroll tr th div'); //获取th下边的div
var tableScroll = $('.section-scroll'); //获取滚动条同级的class
        function scrollHandle() {
            var scrollTop = tableScroll.scrollTop();
            // 当滚动距离大于0时设置top及相应的样式
            if (scrollTop > 0) {
                tableCont.css({
                    "top": scrollTop + 'px',
                    "marginTop": "-1px",
                    "padding": 0
                });
                tableCont_child.css({
                    "borderTop": "1px solid gainsboro",
                    "borderBottom": "1px solid gainsboro",
                    "marginTop": "-1px",
                    "padding": "8px"
                })
            } else {
            // 当滚动距离小于0时设置top及相应的样式
                tableCont.css({
                    "top": scrollTop + 'px',
                    "marginTop": "0",
                });
                tableCont_child.css({
                    "border": "none",
                    "marginTop": 0,
                    "marginBottom": 0,
                })
            }
        }
tableScroll.on('scroll', scrollHandle);

이로써 첫 번째 미터 헤드 고정 방법이 완성되었습니다. 브라우저에서는 기본적으로 완벽해 보이지만 mui에서 이 방법을 사용하면 앱의 스크롤이 반동하는 경우가 있어 효과가 약간 지연되는 것처럼 보일 수 있습니다. 저는 멍청한 놈입니다. 마음에 들지 않으면 댓글을 달지 마세요(답글 환영합니다...).

둘째, jq 플러그인을 사용하세요. (작년에 회사에서 헤더 만들 때 찾아달라고 했던 jq 플러그인입니다. 기술적인 문제로 Angular에서 jq를 사용했습니다. 아무튼 결국 해결되었습니다.) ㅎㅎ)

작년에 간단하게 급하게 만들었기 때문에 데모의 스크린샷을 찍고 주로 jquery.fixedheadertable.min.js 플러그인을 사용했습니다. 위 사진의 데모는 마음에 들지 않으시면 비난하지 마세요, 저는 초보자입니다)

플러그인 주소: http://www.jq22.com/jquery-info10153

위 내용은 CSS는 테이블의 특정 행을 수정하도록 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!