테이블에서 슬래시 헤더 효과를 얻는 방법
테이블, 이건 누구에게나 친숙할 텐데요. 코드에서 자주 접하기 때문에 테이블에 슬래시 헤더를 추가해야 하는 경우가 있는데, 이 효과를 어떻게 얻을 수 있을까요?
다음과 같은 방법을 정리했습니다.
1.가장 간단하고 간단한 방법
회사 UI에 직접 가서 사진을 만들어 달라고 해서 여기에 배경 사진으로 넣은 뒤 채워주세요. 매우 간단하지 않습니까! ! !
2. 꽤 간단한 방법
사실 CSS3를 아는 친구들은 이 효과를 보면 바로 속성 변환이 떠오릅니다. 네, 이게 정말 가능하지만, 아주 간단한 문제가 있습니다. 브라우저 호환성 문제에 관해서는 모두 항상 위기의식을 유지해야 합니다(IE는 여전히 존재합니다). 회사에서 Chrome과만 호환되도록 요구한다면 이 방법이 적합합니다.
3. 아주 간단한 방법
.biaoTou {
border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/
border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/
}<td width="200"><div class="biaoTou"></div></td>
이 방법도 매우 간단하니 위 형식에 맞춰 적어주시면 됩니다. 그러나 이 방법에는 명백한 문제가 있습니다. 이 방법은 실제로 테이블 머리글의 대각선을 구분하기 위해 서로 다른 두 가지 색상의 테두리를 사용하는 경우 대각선의 양쪽 색상이 동일할 수 없습니다. 판촉 활동과 같은 일부 형태에는 이 방법을 사용할 수 있습니다. 그러나 슬래시 양쪽의 색상이 동일해야 하는 경우에는 이 접근 방식을 적용할 수 없습니다. 주의해서 사용하세요.
4. 매우 간단한 방법
이 효과는 실제로 CSS3의 또 다른 새로운 태그인 캔버스를 사용하여 얻을 수 있습니다. 캔버스로 사용하여 대각선을 그리는 방법은 매우 간단하므로 자세히 설명하지 않겠습니다. 다만, 크롬에서만 호환되는 경우에는 공통적인 호환성 문제도 있습니다. 원하는 것은 무엇이든 할 수 있습니다(왜 우리 회사는 항상 끔찍한 IE를 고려해야 하고, 또한 Google과 호환되는 프로젝트만 하고 싶습니다).
5. 단순한 방법이 아닙니다
이것이 js 방법입니다
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>斜线表头</TITLE> <meta http-equiv="content-type" content="charset=gbk"> </HEAD>
<body leftmargin=0 topmargin=0> <br> <div height="300">header</div> <hr> <TABLE border=0 bgcolor="000000" cellspacing="1" width=400 style="margin-left: 100px;"> <TR bgcolor="FFFFFF"> <TD width="111" height="52"><table width="100%" height="100%"
border="0" cellpadding="0" cellspacing="0"> <tr> <td id="td1"></td> <td>成绩</td> </tr> <tr> <td>姓名</td> <td id="td2"></td> </tr> </table></TD> <TD width="81">数学</TD> <TD width="96">英语</TD> <TD width="99">C语言</TD> </TR> <TR bgcolor="FFFFFF"> <TD>张三</TD> <TD>55</TD> <TD>66</TD> <TD>77</TD> </TR> <TR bgcolor="FFFFFF"> <TD>李四</TD> <TD>99</TD> <TD>68</TD> <TD>71</TD> </TR> <TR bgcolor="FFFFFF"> <TD>王五</TD> <TD>33</TD> <TD>44</TD> <TD>55</TD> </TR> </TABLE> <script type="text/javascript"> function a(x, y, color) {
document
.write("<img border='0' style='position: absolute; left: " + (x) + "; top: " + (y) + ";background-color: " + color + "' src='px.gif' width=1 height=1>")
} function getTop(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetTop; while (vParent.tagName.toUpperCase() != "body") {
t += vParent.offsetTop;
vParentvParent = vParent.offsetParent;
} return t;
}
function getLeft(tdobj) {
vParent = tdobj.offsetParent;
t = tdobj.offsetLeft; while (vParent.tagName.toUpperCase() != "body") {
t += vParent.offsetLeft;
vParentvParent = vParent.offsetParent;
} return t;
} function line(x1, y1, x2, y2, color) { var tmp if (x1 >= x2) {
tmp = x1;
x1 = x2;
x2 = tmp;
tmp = y1;
y1 = y2;
y2 = tmp;
} for ( var i = x1; i <= x2; i++) {
x = i;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
a(x, y, color);
}
} //line(1,1,100,100,"000000"); line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,
getTop(td1) + td1.offsetHeight, '#000000');
line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,
getTop(td2) + td2.offsetHeight, '#000000'); </script> </body> </HTML>자, 다섯 가지 방법을 모두 마쳤습니다. 모두에게 도움이 되기를 바랍니다
위 내용은 테이블에서 슬래시 헤더 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7675
15
1393
52
1207
24
91
11
73
19
PPT 표에 삽입된 그림의 형식을 조정하는 단계
Mar 26, 2024 pm 04:16 PM
1. 예시처럼 새 PPT 파일을 만들고 이름을 [PPT Tips]로 지정합니다. 2. [PPT 팁]을 더블클릭하여 PPT 파일을 엽니다. 3. 예를 들어 행 2개와 열 2개로 구성된 표를 삽입합니다. 4. 테이블 테두리를 더블클릭하면 상단 툴바에 [디자인] 옵션이 나타납니다. 5. [음영] 옵션을 클릭한 후 [그림]을 클릭하세요. 6. [그림]을 클릭하면 그림을 배경으로 채우기 옵션 대화 상자가 나타납니다. 7. 디렉토리에서 삽입하려는 트레이를 찾은 후 확인을 클릭하여 그림을 삽입하세요. 8. 테이블 상자를 마우스 오른쪽 버튼으로 클릭하여 설정 대화 상자를 불러옵니다. 9. [셀 서식]을 클릭하고 [이미지를 음영으로 배열]을 선택하세요. 10. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.
판매 예측 테이블을 만드는 방법
Mar 20, 2024 pm 03:06 PM
능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 1. [매출 예측 및 목표 설정], xlsm을 열어 각 테이블에 저장된 데이터를 분석합니다. 2. 새로운 [빈 워크시트]를 생성하고 [셀]을 선택한 후 [라벨 정보]를 입력하세요. 아래로 [드래그]하여 달을 [채우세요]. [기타] 데이터를 입력한 후 [
조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계
Mar 27, 2024 pm 07:30 PM
1. 워크시트를 열고 [시작]-[조건부 서식] 버튼을 찾습니다. 2. 열 선택을 클릭하고 조건부 서식을 추가할 열을 선택합니다. 3. [조건부 서식] 버튼을 클릭하면 옵션 메뉴가 나타납니다. 4. [조건부규칙 강조]-[사이]를 선택하세요. 5. 20, 24, 진한 녹색 텍스트와 어두운 채우기 색상 규칙을 입력합니다. 6. 확인 후, 선택한 열의 데이터는 설정에 따라 해당 숫자, 텍스트 및 셀 상자로 색상이 지정됩니다. 7. 충돌하지 않는 조건부 규칙은 반복적으로 추가할 수 있지만, 충돌하는 규칙의 경우 WPS는 이전에 설정된 조건부 규칙을 마지막에 추가된 규칙으로 대체합니다. 8. [사이] 규칙 20-24 및 [보다 작음] 20 뒤에 셀 열을 반복적으로 추가합니다. 9. 규칙을 변경해야 하는 경우 규칙을 삭제한 다음 규칙을 재설정하면 됩니다.
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까?
Mar 24, 2024 am 11:27 AM
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에
PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법
Mar 20, 2024 pm 04:54 PM
프로그래밍 언어 PHP는 다양한 프로그래밍 논리와 알고리즘을 지원할 수 있는 강력한 웹 개발 도구입니다. 그중 피보나치 수열을 구현하는 것은 일반적이고 고전적인 프로그래밍 문제입니다. 이 기사에서는 PHP 프로그래밍 언어를 사용하여 피보나치 수열을 구현하는 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 피보나치 수열은 다음과 같이 정의되는 수학적 수열입니다. 수열의 첫 번째와 두 번째 요소는 1이고 세 번째 요소부터 시작하여 각 요소의 값은 이전 두 요소의 합과 같습니다. 시퀀스의 처음 몇 가지 요소
Word 표를 합산하는 방법을 알고 있나요?
Mar 21, 2024 pm 01:10 PM
때때로 Word 테이블에서 계산 문제가 발생하는 경우가 많습니다. 일반적으로 이러한 문제가 발생하면 대부분의 학생들은 계산을 위해 Word 테이블을 복사하고 일부 학생들은 자동으로 계산기를 사용합니다. 빨리 계산하는 방법이 있나요? 물론, 실제로 합계는 Word에서도 계산할 수 있습니다. 그럼 어떻게 하는지 아시나요? 오늘은 함께 살펴보시죠! 더 이상 고민하지 말고, 도움이 필요한 친구들은 빨리 수집해야 합니다! 단계 세부사항: 1. 먼저 컴퓨터에서 Word 소프트웨어를 열고 처리해야 하는 문서를 엽니다. (그림 참조) 2. 다음으로 합산된 값이 있는 셀에 커서를 놓고(그림 참조) [메뉴 모음]을 클릭합니다.
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법
Mar 24, 2024 pm 06:03 PM
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.
Word에서 테이블을 가로 및 세로로 전환하는 방법
Mar 20, 2024 am 09:31 AM
Word 소프트웨어는 우리에게 없어서는 안될 소프트웨어이며 자주 사용해야 합니다. 이전에 Word 소프트웨어를 사용하여 표를 편집하는 방법을 배웠습니다. 그러나 실수로 표를 가로 및 세로 방향으로 편집하면 다시 시간을 낭비하고 싶지 않습니다. -만들고 보니 테이블의 가로, 세로 방향을 바꿀 수 있나요? 대답은 당연히 그렇습니다.다음으로 편집자가 Word에서 테이블을 가로 및 세로로 바꾸는 방법을 자세히 소개하겠습니다. 먼저 아래 Word 표의 행과 열을 바꿔야 합니다. 이렇게 하려면 먼저 테이블 전체를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 복사 기능을 선택해야 합니다. 2단계: 복사를 선택한 후 단어를 최소화한 다음 Excel 테이블을 열고 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택한 다음 Exc에 붙여넣습니다.
