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

이 문서의 내용은 순수 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}

              

테이블 헤더의 그리드가 테이블 본문의 그리드와 정렬되지 않은 것으로 확인되었습니다. 이때 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를 사용하여 테이블 헤더를 수정하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!