찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >순수 CSS로 테이블 헤더를 수정하는 방법은 무엇입니까? 테이블 헤더 고정 구현

순수 CSS로 테이블 헤더를 수정하는 방법은 무엇입니까? 테이블 헤더 고정 구현

青灯夜游
青灯夜游앞으로
2018-11-10 17:38:153793검색

이 글의 내용은 순수 CSS로 테이블 헤더를 수정하는 방법을 소개하는 것입니다. 헤더 고정 구현. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

순수한 CSS로 테이블 헤더 고정을 구현하기 어려운 이유는 주로 두 가지 때문입니다.

1. 시장 점유율이 가장 큰 IE6은 position:fix를 지원하지 않습니다.

2. 사람들은 테이블에서 이러한 효과를 얻고 싶어합니다.

그런데 실제로 외국 사람들은 엄청난 수의 CSS 핵을 사용하여 순수 CSS를 사용하여 이 효과를 달성했습니다... 코드가 이해하기 어렵고 확장하기 어렵다면 자바스크립트를 사용하는 것이 더 낫다고 생각합니다. 우연히도 오늘 이런 필요성을 접하게 되었는데, 다른 각도에서 생각해보니 정말 이해가 되었습니다.

CSS는 성능을 담당하고 HTML은 구조를 담당한다는 것을 알고 있습니다. 동일한 구조이지만 스타일을 변경하면 사람들에게 완전히 다른 느낌을 줄 것입니다. 이는 인간의 눈이 쉽게 속임을 의미합니다. 따라서 p+CSS가 열광적으로 주창되던 시절 사람들은 항상 페이지에서 테이블을 제거하고 싶어했고 p+span을 사용하여 하나씩 "테이블"을 생성했습니다.

이런 종류의 일은 바람직하지 않지만 테이블이 무엇을 할 수 있는지 알려주고 몇 가지 조합으로 할 수도 있습니다. 다시 말하면, 테이블 하나는 할 수 없고, 테이블 두 개만 하면 됩니다.

위의 표는 헤더를 시뮬레이션한 것이고, 아래의 표는 스크롤바가 있는 부분을 시뮬레이션한 것입니다. 더 나아가기 전에, 너무 추상적이지 않고 먼저 우리의 요구 사항을 명확히 합시다. 먼저, 테이블은 4*9이고 각 열의 너비는 170px이며 총 크기는 680px입니다. 각 브라우저의 기본 스크롤 막대는 16px입니다. 너비에는 5개의 세로 테두리가 있습니다. 4개 열의 너비 총 길이는 701px입니다. 



  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
    
    
    
    
    
    
    
    
    




그런 다음 이 테이블을 두 개로 나눕니다. 첫 번째 테이블은 헤더이고 두 번째 테이블에는 스크롤 막대가 있어야 합니다. 즉, 오버플로 스타일이 상위 요소에 적용되어야 하므로 p로 래핑해야 합니다. . 이 p와 첫 번째 테이블의 길이는 동일해야 합니다. 


하지만 걱정하지 마세요. 외부에 p를 넣고 너비를 701px로 설정한 다음 이 두 하위 요소의 너비를 100%로 설정합니다. 테이블의 렌더링 효율성을 높이기 위해 테이블에 tbody를 명시적으로 추가합니다. 


<p>
  </p>


    
      
        
        
        
        
      
    
  
名称语法说明例子

  

    


      
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
      
    
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

  

프레젠테이션 레이어 부분: 


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
 
#scrollTable table.thead{ /*表头*/
  /*p的第一个子元素*/
  width:100%;
}
 
#scrollTable table.thead th{/*表头*/
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
 
#scrollTable p{/*能带滚动条的表身*/
  /*p的第二个子元素*/
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
}
 
#scrollTable table.tbody{/*能带滚动条的表身的正体*/
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
#scrollTable table.tbody td{/*能带滚动条的表身的格子*/
  border:1px solid #C96;
}


실행 코드: 


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定</title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }


      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }

      #scrollTable table.thead{ /*表头*/
        /*p的第一个子元素*/
        width:100%;
      }

      #scrollTable table.thead th{/*表头*/
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }

      #scrollTable p{/*能带滚动条的表身*/
        /*p的第二个子元素*/
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
      }

      #scrollTable table.tbody{/*能带滚动条的表身的正体*/
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      #scrollTable table.tbody td{/*能带滚动条的表身的格子*/
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


      
        
          
            
            
            
            
          
        
      
名称语法说明例子

      

        


       
          
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    


  



테이블 헤더의 그리드가 테이블 본문의 그리드와 정렬되지 않은 것으로 확인되었습니다. 이때 col 태그를 사용해야 합니다. col을 사용하면 tbody의 동일한 인덱스 값으로 td 또는 th의 배경색, 텍스트 정렬 및 너비를 균일하게 설정할 수 있습니다. CSS2.1의 인접 선택자와 CSS3의 하위 요소 필터링 의사 클래스를 사용하면 보다 간소화된 방식으로 설정할 수 있고 스타일과 구조가 분리되어 있지만 IE 제품군이 항상 뒤처지는 것은 아쉽습니다. . 마지막 테이블이 스크롤 막대에 의해 압축되어 길이가 줄어들 수 있으므로 다시 길이를 살펴보겠습니다. 따라서 처음 세 열의 길이가 동일하고 나머지는 마지막 열에 할당되는지 확인하면 됩니다. 즉, 마지막 항목은 설정할 필요가 없습니다. 또한 IE에서는 스크롤 막대의 스타일을 설정할 수 있습니다. 이를 사용해 보겠습니다. 




                  
//********************略*****************
        
 




 

      


                      
//********************略*****************    
          
      




 
프레젠테이션 레이어 부분: 


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
/*表头 p的第一个子元素**/
#scrollTable table.thead{ 
  width:100%;
}
/*表头*/
#scrollTable table.thead th{
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
/*能带滚动条的表身*/
/*p的第二个子元素*/
#scrollTable p{
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
  scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
  scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
  scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
  scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
  scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
  scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
  scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
  scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
}
/*能带滚动条的表身的正体*/
#scrollTable table.tbody{
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
/*能带滚动条的表身的格子*/
#scrollTable table.tbody td{
  border:1px solid #C96;
}


실행 코드: 


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定 </title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }

      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }
      /*表头 p的第一个子元素**/
      #scrollTable table.thead{ 
        width:100%;
      }
      /*表头*/
      #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }
      /*能带滚动条的表身*/
      /*p的第二个子元素*/
      #scrollTable p{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
        scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
        scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
        scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
        scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
        scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
        scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
      }
      /*能带滚动条的表身的正体*/
      #scrollTable table.tbody{
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      /*能带滚动条的表身的格子*/
      #scrollTable table.tbody td{
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


                  
          
            
            
            
            
          
        
      



名称语法说明例子

      

        


                      
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        



Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    

  

순수 CSS로 테이블 헤더를 수정하는 방법은 무엇입니까? 테이블 헤더 고정 구현



위 내용은 순수 CSS로 테이블 헤더를 수정하는 방법은 무엇입니까? 테이블 헤더 고정 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css css3 html 选择器 position overflow border 伪类 table tbody td th
성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)다음 기사：CSS를 사용하여 자리 표시자 스타일을 수정하는 방법 소개(코드 예)
관련 기사
더보기