复杂表头表格
复杂表头表格。如下图：
DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多表头表格title>
<style>
/* 榛樿棰滆壊 */
/*鍒嗛〉棰滆壊*/
/* 瀛椾綋棰滆壊 */
/* 鏂囧瓧澶у皬 */
/* remove rounds from all elements */
div,
input,
select,
textarea,
span,
img,
table,
td,
th,
p,
a,
button,
ul,
code,
pre,
li {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
/***
Bootstrap Tables
***/
.table thead > tr > th {
border-bottom: 0;
}
.table tbody tr.active td,
.table tbody tr.active th {
background-color: #e9e9e9 !important;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #e1e1e1 !important;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
.table .heading > th {
background-color: #eee !important;
}
/***
Responsive Image
***/
.table td .img-responsive {
width: 100%;
}
.table-basic {
border: 1px solid #e5ebf1;
border-collapse: collapse;
border-spacing: 1px;
background-color: #f5fafd;
text-align: center;
text-align: center !important;
width: 100%;
}
.table-basic.fixed-width {
table-layout: fixed;
}
.table-basic thead {
background-color: #cde1fc;
}
.table-basic thead th {
padding: 10px 20px;
font-weight: normal;
line-height: 1;
text-align: center;
text-align: center !important;
}
.table-basic thead th.tleft {
text-align: left;
text-align: left !important;
}
.table-basic thead th.tright {
text-align: right;
}
.table-padding.table-basic thead th {
padding: 10px 5px;
}
.border-table.table-basic thead th,
.table-basic thead th.first {
border-right: 1px solid #e5ebf1;
}
.table-basic thead th.bordertop {
border-top: 1px solid #e5ebf1;
}
.table-basic tbody tr th {
font-weight: normal;
text-align: right;
border: 1px solid #e5ebf1;
background-color: #f5fafd;
}
.border-table.table-basic tbody tr:hover td {
background-color: #e3f2fa;
}
.table-basic tbody tr td {
line-height: 15px;
border-top: 1px solid #e5ebf1;
border-bottom: 1px solid #e5ebf1;
background-color: #ffffff;
padding: 10px 20px;
}
.table-padding.table-basic tbody tr td {
padding: 10px 5px;
}
.border-table.table-basic tbody tr td,
.table-basic tbody tr td.first {
border-right: 1px solid #e5ebf1;
}
.table-basic tbody tr td.break {
word-break: break-all;
}
.table-basic tbody tr td.overflow {
overflow: hidden;
white-space: nowrap;
}
.table-basic tbody tr td.bg-gray {
background-color: #f5fafd;
}
.table-basic tfoot td {
padding: 25px 0;
background-color: #f5fafd;
}
.table-basic tfoot td p {
margin-bottom: 15px;
}
.table-basic tfoot td p span.price,
.table-basic tfoot td p .text-w80,
.table-basic tfoot td p .text-w100 {
width: 100px;
text-align: left;
text-align: left !important;
display: inline-block;
}
.table-basic tfoot td p .text-w80 {
width: 80px !important;
}
.table-basic p:last-child {
margin-bottom: 0;
}
.table-basic.table-right tbody tr td{
border-right: 1px solid #e5ebf1;
}
style>
head>
<body>
<table id="tab" class="table-basic table-padding table-right" width="100%">
<tbody>
<tr>
<td colspan="5">平台1td>
<td colspan="5">平台2td>
<td colspan="4">平台3td>
<td>平台4td>
<td>平台5td>
tr>
<tr>
<td colspan="2">已创建订单td>
<td colspan="2">滞留订单td>
<td>小计td>
<td rowspan="3">已创建未审核td>
<td rowspan="3">已审核未流入-平台2td>
<td rowspan="3">已流入平台2td>
<td rowspan="3">异常订单td>
<td rowspan="3">小计td>
<td rowspan="3">特派单td>
<td rowspan="3">派单到店成功td>
<td rowspan="3">派单到仓成功td>
<td rowspan="3">小计td>
<td rowspan="3">已创建td>
<td rowspan="3">已创建td>
tr>
<tr>
<td colspan="2">4300 td>
<td colspan="2">700 td>
<td>5000td>
tr>
<tr>
<td colspan="5">非外部平台订单td>
tr>
<tr>
<td>导入订单td>
<td>次平台订单td>
<td>换货单td>
<td>补发单td>
<td>小计td>
<td rowspan="2">100td>
<td rowspan="2">100td>
<td rowspan="2">4000td>
<td rowspan="2">300td>
<td rowspan="2">4500td>
<td rowspan="2">1000td>
<td rowspan="2">1000td>
<td rowspan="2">2000td>
<td rowspan="2">4000td>
<td rowspan="2">1000td>
<td rowspan="2">2000td>
tr>
<tr>
<td>80td>
<td>100td>
<td>10td>
<td>10td>
<td>200td>
tr>
tbody>
table>
<h2>表格-----（2）h2>
<table id="tab2" class="table-basic table-padding table-right" width="100%">
<tbody>
<tr>
<td colspan="3">平台1td>
<td colspan="3">平台2td>
<td colspan="3">平台3td>
<td colspan="3">平台4td>
<td colspan="3">平台5td>
tr>
<tr>
<td>成功件数td>
<td>失败件数td>
<td>小计td>
<td>成功件数td>
<td>失败件数td>
<td>小计td>
<td>成功件数td>
<td>失败件数td>
<td>小计td>
<td>第三方件数td>
<td>失败件数td>
<td>小计td>
<td>成功件数td>
<td>失败件数td>
<td>小计td>
tr>
<tr>
<td>2000td>
<td>500td>
<td>2500td>
<td>1000td>
<td>500td>
<td>1500td>
<td>2900td>
<td>100td>
<td>3000td>
<td>2800td>
<td>100td>
<td>2900td>
<td>2700td>
<td>100td>
<td>2800td>
tr>
tbody>
table>
body>
html>