div+css实现倾斜表头的table表格样式代码-html代码-BFW代码库

div+css实现倾斜表头的table表格样式代码

代码语言：html

所属分类：表格

代码描述：div+css实现倾斜表头的table表格样式代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths">

<head>
    <meta charset="UTF-8">
    <style>
        .table-header-rotated {
	border-collapse:collapse
}
.csstransforms .table-header-rotated td {
	width:30px
}
.no-csstransforms .table-header-rotated th {
	padding:5px 10px
}
.table-header-rotated td {
	text-align:center;
	padding:10px 5px;
	border:1px solid #ccc
}
.csstransforms .table-header-rotated th.rotate {
	height:140px;
	white-space:nowrap
}
.csstransforms .table-header-rotated th.rotate>div {
	transform:translate(25px,51px) rotate(315deg);
	width:30px
}
.csstransforms .table-header-rotated th.rotate>div>span {
	border-bottom:1px solid #ccc;
	padding:5px 10px
}
.table-header-rotated th.row-header {
	padding:0 10px;
	border-bottom:1px solid #ccc
}

    </style>
</head>

<body>

    <table class="table table-header-rotated">
        <thead>
            <tr>
                <!-- First 列头 is not rotated -->
                <th></th>
                <!-- Following headers are rotated -->
                <th class="rotate">
                    <div><span>列头 1</span></div>
                </th>
                <th class="rotate">
                    <div><span>列头 2</span></div>
                </th>
                <th class="rotate">
                    <div><span>列头 3</span></div>
                </th>
                <th class="rotate">
                    <div><span>列头 4</span></div>
                </th>
                <th class="rotate">
                    <div><span>列头 5</span></div>
                </th>
                <th class="rotate">
                    <div><span>列头 6</span></div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="row-header">行头 1</th>
                <td><input checked="checked" name="column1[]" type="radio" value=&q.........完整代码请登录后点击上方下载按钮下载查看