찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >순수 CSS를 사용하여 테이블 헤더를 수정하는 코드 예제

순수 CSS를 사용하여 테이블 헤더를 수정하는 코드 예제

不言
不言앞으로
2018-11-12 15:07:282126검색

이 문서의 내용은 순수 CSS에서 테이블 헤더를 수정하는 코드 예제에 대한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

순수한 CSS로 테이블 헤더를 수정하기 어려운 이유는 크게 두 가지 때문입니다. 첫째, 시장점유율이 가장 높은 IE6은 position:fixed를 지원하지 않습니다. 또 다른 점은 사람들이 테이블에서 이러한 효과를 얻고 싶어한다는 것입니다.

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}

      
    


  

순수 CSS를 사용하여 테이블 헤더를 수정하는 코드 예제


테이블 헤더의 그리드가 테이블 본문의 그리드와 정렬되지 않은 것으로 확인되었습니다. 이때 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}

      
    

  

13133049-7adf059f2811f093 (1).png
위 내용은 순수 CSS를 사용하여 테이블 헤더를 수정하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：<기본형>이란 무엇인가요? 무슨 소용이 있나요?다음 기사：<기본형>이란 무엇인가요? 무슨 소용이 있나요?
관련 기사
더보기