<table id="mainTable">
<tr>
<td>
<table id="mainLeftTable">
<tr style="height:300px;">
<td>
<div class="ui raised segment" id="mainLeftTopDiv">
<table id="mainLeftTopTable">
<tr>
<td><div id="pieChart"></div></td>
<td>
<table class="ui very basic table" id="orderInfoTable">
<tbody>
<tr>
<td>总订单数量</td>
<td>@ViewBag.OrderTotalNum</td>
</tr>
<tr>
<td>待上线订单</td>
<td>@ViewBag.OrderWaitNum</td>
</tr>
<tr>
<td>正在生产</td>
<td>@ViewBag.OrderOnlineNum</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr style="height:100%;background-color:blue">
<td>
<div class="ui raised segment" id="mainLeftBottomDiv">
<div class="ui raised segment" id="barChart" style="width: 500px;height:300px;"></div>
</div>
</td>
</tr>
</table>
</td>
<td style="width:250px;">
<table id="mainRightTable">
<tr style="height:250px;">
<td id="onlineOrderInfo">
<div class="ui raised segment" id="mainRightTopDiv" style="width: 100%;height:100%;">
<h1>正在生产订单</h1>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
<table>
<tr><td>订单号:</td><td>MP000001</td></tr>
<tr><td>总量:</td><td>1000</td></tr>
<tr><td>已贴片数量:</td><td>100</td></tr>
</table>
<div class="ui fitted divider"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
#mainTable {
height: 100%;
width: 100%;
background-color: #fafafa;
padding: 0px;
margin: 0px;
border:1px dashed red;
}
#mainTable td {
border: 1px dashed red;
}
#mainLeftTopDiv {
height: 100%;
width: 100%;
margin:0px;
}
#mainLeftTable {
height: 100%;
width: 100%;
}
#mainLeftTopTable{
width: 100%;
height: 100%;
background-color:red;
}
#mainLeftTopTable td:first-child{
width:400px;
}
#mainLeftBottomDiv {
height: 100%;
width: 100%;
padding: 0px;
background-color:#faf;
}
/*
#mainRightTable {
height: 100%;
width: 100%;
}
#mainRightTopDiv{
height: 100%;
width: 100%;
margin-left:-5px;
border:0px;
padding:0px;
}
#mainRightButtomDiv {
height: 100%;
width: 100%;
margin-left: -5px;
border: 0px;
padding: 0px;
float:right;
}
*/
#pieChart {
border: 0px;
margin: 0px;
padding: 0px;
width:300px;
height:250px;
}