[DIV+CSS] 绘制2重交叉表_html/css_WEB-ITnose
Jun 24, 2016 pm 12:31 PM
几年前曾有过 在Web上生成交叉表的需求,不过由于当时CSS+Div 尚未盛行, 以至于table+table的在页面上折腾. 最后也只能到2重交叉表的程度, 然而通用性,可读性都很差, 还不易于维护. 于是随着Css+Div布局潮流,重写了交叉表(2重,3重...多重) 并在项目中运用了. 在这整理一下.
先说下2重交叉表
首先确立结构:
先说下scrollDiv 方法主要是为了实现表体滚动的时候表侧和表头能同时跟着滚动. 代码很简单.
function scrollDiv() {
document.getElementById('theadR').scrollLeft = document.getElementById('tbodyR').scrollLeft;
document.getElementById('tbodyL').scrollTop = document.getElementById('tbodyR').scrollTop;
}
定义好结构以后就是css定制了.
首先给最外层table 定义边距 margin-left:20px;margin-bottom:15px;
然后是内部4块
左上部分表头最简单,但是也很重要, 他的高度对应着右表头的的高度,宽度对应着表侧的宽度. 至于外边框则根据需要加了.
.table .theadL{top:0px;left:0px;width:300px;height:103px;background:Silver;border-top:solid 1px black;border-left:solid 1px black;}
右上部分表头主要是为了和表体部分竖线对齐, 所以列宽全部设死, 列内设置div 并且设置 overflow:hidden.
表侧也同理 并且设置高度和表体部分列高一样.
表侧部分的样式就简单了 只要设置下列内div 高度宽度 和overflaw:hidden 保证内容不益处就好了.
.table .tbodyL{top:103px;left:0px;width:300px;height:250px;border-bottom:solid 1px black;border-right:solid 1px black;}
.table .theadR{top:0px;left:299px;width:500px;height:103px;border-top:solid 1px black;border-top:solid 1px black; }
.table .tbodyR{top:103px;left:300px;width:517px;height:267px;}
效果如下:
还有更复杂的交叉表,也是差不多处理. 总而言之,DIV+CSS布局确实可以把很多复杂WEB设计问题简单化.
继续学习中....
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7281
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1341
46


라라벨 튜토리얼
1258
25


PHP 튜토리얼
1205
29



공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
