순수 CSS를 사용하여 테이블 헤더를 수정하는 코드 예제
- 不言앞으로
- 2018-11-12 15:07:282078검색
이 문서의 내용은 순수 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!