순수 CSS로 테이블 헤더를 수정하는 방법은 무엇입니까? 테이블 헤더 고정 구현-CSS 튜토리얼-php.cn

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