<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>表格</title>
<meta name="description" content="Kidd.StickyTable is jQuery plugin to modify a table element with a fixed header element and fixed left columns (freeze table header and the left columns).">
<meta name="author" content="Danukidd">
<meta name="copyright" content="Danukidd">
<link rel="stylesheet" type="text/css" href="assets/css/kidd.stickytable.css" />
<link rel="stylesheet" type="text/css" href="assets/css/colpick.css" />
<style>
@media (min-width: 0px) and (max-width: 800px) {
#options-area,
#preview-area {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 801px) {
#options-area {
width: 35%;
}
#preview-area {
width: 100%;
}
}
label,
fieldset {
font-family: arial;
font-size: 12px;
font-weight: 400;
}
label {
float: left;
margin-right: 5px;
color: #333;
}
fieldset {
margin-top: 5px;
}
legend {
color: blue;
}
.inputpicker {
margin: 0;
padding: 0;
border: 1px solid #ccc;
width: 100px;
height: 20px;
border-right: 20px solid #ccc;
line-height: 20px;
margin-bottom: 5px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
}
.btn:focus {
outline: thin dotted;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333 !important;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
outline: 0 none;
}
.btn.disabled,
.btn[disabled] {
box-shadow: none;
cursor: not-allowed;
opacity: 0.65;
pointer-events: none;
}
.btn-default {
background-color: #fff;
border-color: #ccc;
color: #333;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
background-color: #ebebeb;
border-color: #adadad;
color: #333;
}
.btn-default:active,
.btn-default.active {
background-image: none;
}
.stickytable-container .bordered td{
text-align: center;
word-break: keep-all;
}
</style>
</head>
<body class="">
<div id="options-area" style="float: left; margin-bottom: 20px;display: none" >
<div style="padding-right: 10px;">
<p style="text-align: center; margin:0; padding: 5px 0; font-family: arial; font-weight: 400; border: 1px solid #ccc; border-bottom: 0; background: #ccc;">选项:</p>
<div style="border: 1px solid #ccc; padding: 10px;">
<label for="showExportBtn" style="width: 100%;">
<input id="showExportBtn" name="showExportBtn" type="checkbox" /> Show Export Button</label>
<label for="isTwoSide" style="width: 100%; margin-bottom: 5px;">
<input id="isTwoSide" name="isTwoSide" type="checkbox" /> Export Button Is Top and Bottom Table?</label>
<fieldset>
<legend>Export Type:</legend>
<label for="type-xls">
<input id="type-xls" name="type" type="checkbox" value="xls" /> Excel (xls)</label>
<label for="type-pdf">
<input id="type-pdf" name="type" type="checkbox" value="pdf" /> PDF</label>
<label for="type-png">
<input id="type-png" name="type" type="checkbox" value="png" /> PNG</label>
</fieldset>
<fieldset>
<legend>Export Button Position:</legend>
<label for="position-topright">
<input id="position-topright" name="position" type="radio" value="topright" /> Top-Right</label>
<label for="position-topleft">
<input id="position-topleft" name="position" type="radio" value="topleft" /> Top-Left</label>
<label for="position-bottomright">
<input id="position-bottomright" name="position" type="radio" value="bottomright" /> Bottom-Right</label>
<label for="position-bottomleft">
<input id="position-bottomleft" name="position" type="radio" value="bottomleft" /> Bottom-Left</label>
</fieldset>
<fieldset>
<legend>Table Style:</legend>
<label for="style-default">
<input id="style-default" name="style" type="radio" value="" /> Default</label>
<label for="style-bordered">
<input id="style-bordered" name="style" type="radio" value="bordered" /> Bordered</label>
</fieldset>
<fieldset>
<legend>Provided Table Color:</legend>
<label for="color-green" style="background-color:#1bbc9b;">
<input id="color-green" name="color" type="radio" value="green" /> Green</label>
<label for="color-blue" style="background-color:#3598dc;">
<input id="color-blue" name="color" type="radio" value="blue" /> Blue</label>
<label for="color-red" style="background-color:#e26a6a;">
<input id="color-red" name="color" type="radio" value="red" /> Red</label>
<label for="color-yellow" style="background-color:#f7ca18;">
<input id="color-yellow" name="color" type="radio" value="yellow" /> Yellow</label>
<label for="color-purple" style="background-color:#9b59b6;">
<input id="color-purple" name="color" type="radio" value="purple" /> Purple</label>
<label for="color-grey" style="background-color:#afafaf;">
<input id="color-grey" name="color" type="radio" value="grey" /> Grey</label>
</fieldset>
<fieldset>
<legend>Custom Table Color (required all):</legend>
<label for="head-color" style="">Heading
<input type="text" id="head-color" name="head-color" class="inputpicker"></input>
</label>
<label for="col-color" style="">Column
<input type="text" id="col-color" name="col-color" class="inputpicker"></input>
</label>
<label for="insct-color" style="">Intersect
<input type="text" id="insct-color" name="insct-color" class="inputpicker"></input>
</label>
</fieldset>
<fieldset style="padding-right: 15px;">
<legend>Result:</legend>
<textarea name="result" id="result" rows="3" style="width: 100%"></textarea>
</fieldset>
</div>
<button style="margin-top: 10px;" class="btn btn-default" id="refresh">改变表格属性</button>
</div>
</div>
<div id="preview-area" style="float: left; min-width: 300px;">
<table class="overflow-y preview">
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">自定义1</th>
<th rowspan="2">自定义2</th>
<th rowspan="2">自定义3</th>
<th rowspan="2">自定义4</th>
<th rowspan="2">自定义5</th>
<th rowspan="2">自定义6</th>
<th rowspan="2">自定义7</th>
<th rowspan="2">自定义8</th>
<th colspan="3">自定义9</th>
<th colspan="2">自定义10</th>
<th rowspan="2">自定义11</th>
<th colspan="2">自定义12</th>
</tr>
<tr>
<th>自定义13</th>
<th>自定义14</th>
<th>自定义15</th>
<th>自定义16</th>
<th>自定义17</th>
<th>自定义18</th>
<th>自定义19</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
<td>4</td
复杂多表头excel表格的导出及布局.rar （20个子文件） 
多表头excel导出（修改） assets js 
colpick.js 20KB kidd.stickytable.min.js 10KB jquery-migrate-1.2.1.min.js 7KB jquery.min.js 94KB third-party exporter jspdf.js 68KB jspdf.context2d.js 19KB html2pdf.js 2KB yjxz.js 0B jquery.base64.js 5KB jspdf.png_support.js 14KB jspdf.canvas.js 1015B all-packed-utf-8.js 57KB jspdf.standard_fonts_metrics.js 25KB html2canvas.js 115KB jspdf.annotations.js 9KB jspdf.split_text_to_size.js 9KB json2.js 18KB css kidd.stickytable.css 5KB colpick.css 9KB
index.html 12KB资源评论
