各位师傅,我的问题是,并列一行的8个div 里嵌套8个table,每个table表格的表头和td,跨行合并后 两行高度和其它table的高度对不上,烦劳赐教。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="stylesheet" href="../static/daily/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/daily/css/materialdesignicons.min.css">
<link rel="stylesheet" href="../static/daily/css/style.min.css">
head>
<style>
table {
table-layout: fixed;
white-space: nowrap;
border: 2px solid #777;
margin:0;
padding:0;
}
td {
/* height:40px; */
width:100%;
overflow: hidden;
text-overflow: ellipsis;
border: 4px solid #777;
margin: 0;
padding: 0;
}
th {
/* height:40px; */
width:100%;
overflow: hidden;
text-overflow: ellipsis;
border: 4px solid rgb(207, 135, 94);
margin: 0;
padding: 0;
}
.pad0{
padding: 0px;
}
style>
<body>
<iframe src="/nav/" width="100%" height="75" frameborder="0">iframe>
<div style="width:100%; height:100px; background:#99acff; font-size:30px;">各区域产量完成统计表(截止到7:00)div>
<div style="width:100%; height:700px; margin: 0%; padding: 0%; ">
<div style=" float:left; width:500px; height:700px; background:#aaff99; margin: 0%; padding: 0%;">
<table class="table table-bordered deviceStatus margin: 0%; padding: 0%;">
<thead>
<tr class="status statusWarn">
<th width="35px "> 产量 th>
<th width="60px "> 目标产量th>
<th width="60px "> 实际产量th>
<th width="35px "> 差额 th>
tr>
thead>
<tbody>
{% for S in SList %}
<tr>
{% for i in S%}
<td style="text-align:center">{{i}}td>
{% endfor %}
tr>
{% endfor %}
tbody>
table>
div>
<div style=" float:left; width:95px; height:700px; background:#f0ff99; margin: 0%; padding: 0%; ">
<table class="table table-bordered deviceStatus">
<tr rowspan="2" >
<th colspan="2" class="status statusWarn" >可动率th>
tr>
<tr >
<td> td>
tr>
<tr >
<td> td>
tr>
table>
div>
<div style=" float:left; width:300px; height:700px; background:#ff99fa;">
<table class="table table-bordered deviceStatus">
<tr >
<th colspan="3" class="status statusWarn"> 白班 th>
tr>
<tr>
<th class="status statusWarn"> 计划产量 th>
<th class="status statusWarn"> 实际产量th>
<th class="status statusWarn"> 差额th>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr >
<td> td>
<td> td>
<td> td>
tr>
table>
div>
<div style=" float:left; width:200px; height:700px; background:#f0ff99;">
<table class="table table-bordered deviceStatus">
<tr rowspan="2" >
<th colspan="2" class="status statusWarn" >白班停台时间th>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
<tr >
<td>工艺停台 td>
<td> td>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
table>
div>
<div style=" float:left; width:300px; height:700px; background:#ff99fa;">
<table class="table table-bordered deviceStatus">
<tr >
<th colspan="3" class="status statusWarn"> 二班 th>
tr>
<tr>
<th class="status statusWarn"> 计划产量 th>
<th class="status statusWarn"> 实际产量th>
<th class="status statusWarn"> 差额th>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr rowspan="2">
<td> td>
<td> td>
<td> td>
tr>
<tr >
<td> td>
<td> td>
<td> td>
tr>
table>
div>
<div style=" float:left; width:200px; height:700px; background:#f0ff99;">
<table class="table table-bordered deviceStatus">
<tr rowspan="2" >
<th colspan="2" class="status statusWarn" >二停台时间th>
tr>
<tr >
<td>设备停台 td>
<td> td>
tr>
table>
div>
<div style=" float:left; width:300px; height:700px; background:#ff99fa;">
<table class="table table-bordered deviceStatus">
<tr >
<th colspan="3" class="status statusWarn"> 班 th>
tr>
<tr>
<th class="status statusWarn"> 计划产量 th>
<th class="status statusWarn"> 实际产量th>
<th class="status statusWarn"> 差额th>
tr>
table>
div>
<div style=" float:left; width:200px; height:700px; background:#f0ff99;">
<table class="table table-bordered deviceStatus">
<tr rowspan="2" >
<th colspan="2" class="status statusWarn" >三停台时间th>
tr>
table>
div>
div>
<div style="width:100%; height:200px; background:#99ebff;">
<table>
{% for Pro in P3List %}
<tr>
<th rowspan="3"> 汇报项 th>
<td>白班: td>
<td colspan="21">1111111111td>
tr>
<tr>
<td>2班: td>
<td colspan="21">{{pro.M_pro2}}td>
tr>
<tr>
<td>3班: td>
<td colspan="21">3333333333333 td>
tr>
{% endfor%}
table>
div>
div>
<script type="text/javascript" src="../static/daily/js/jquery.min.js">script>
<script type="text/javascript" src="../static/daily/js/bootstrap.min.js">script>
<script type="text/javascript" src="../static/daily/js/perfect-scrollbar.min.js">script>
<script type="text/javascript" src="../static/daily/js/main.min.js">script>
body>
html>