SOURCE

console 命令行工具 X clear

                    
>
console
<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;
}