复杂表头表格
复杂表头表格。如下图：
<!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">平台1</td> <td colspan="5">平台2</td> <td colspan="4">平台3</td> <td>平台4</td> <td>平台5</td> </tr> <tr> <!-- 左面字表--表一表头 --> <td colspan="2">已创建订单</td> <td colspan="2">滞留订单</td> <td>小计</td> <!-- 右面字表--表2 次表头 --> <td rowspan="3">已创建未审核</td> <td rowspan="3">已审核未流入-平台2</td> <td rowspan="3">已流入平台2</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> <td rowspan="3">已创建</td> </tr> <tr> <!-- 左面字表--表1 内容 --> <td colspan="2">4300 </td> <td colspan="2">700 </td> <td>5000</td> </tr> <tr> <!-- 左面字表--表2 主表头 --> <td colspan="5">非外部平台订单</td> </tr> <tr> <!-- 左面字表--表2 次表头 --> <td>导入订单</td> <td>次平台订单</td> <td>换货单</td> <td>补发单</td> <td>小计</td> <!-- 右面字表--表2 内容 --> <td rowspan="2">100</td> <td rowspan="2">100</td> <td rowspan="2">4000</td> <td rowspan="2">300</td> <td rowspan="2">4500</td> <td rowspan="2">1000</td> <td rowspan="2">1000</td> <td rowspan="2">2000</td> <td rowspan="2">4000</td> <td rowspan="2">1000</td> <td rowspan="2">2000</td> </tr> <tr> <!-- 左面字表--表2内容 --> <td>80</td> <td>100</td> <td>10</td> <td>10</td> <td>200</td> </tr> </tbody> </table> <h2>表格-----（2）</h2> <table id="tab2" class="table-basic table-padding table-right" width="100%"> <tbody> <tr> <td colspan="3">平台1</td> <td colspan="3">平台2</td> <td colspan="3">平台3</td> <td colspan="3">平台4</td> <td colspan="3">平台5</td> </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>2000</td> <td>500</td> <td>2500</td> <td>1000</td> <td>500</td> <td>1500</td> <td>2900</td> <td>100</td> <td>3000</td> <td>2800</td> <td>100</td> <td>2900</td> <td>2700</td> <td>100</td> <td>2800</td> </tr> </tbody> </table> </body> </html>
