复杂表头表格

复杂表头表格。如下图:

复杂表头表格_第1张图片

 

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>

 

转载于:https://www.cnblogs.com/lanyueff/p/11506034.html

你可能感兴趣的:(复杂表头表格)