div 寫table 自適應表格
阿新 • • 發佈:2018-11-13
<div style="text-align: center;display: flex; justify-content: space-between;padding-top:1%"> <div class="case_summary_div"> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Test Case Name: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblTCName">3</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Total Steps: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblTotal">2</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Application: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblIntExt">1</div> </div> <div class="case_summary_inner_div"> <div class="summary_value border-bottom-none"> <b>Device: </b> </div> <div class="summary_value border-right-none border-bottom-none" id="frmtestRunSummary_lblBrowser">9</div> </div> </div> <div class="case_summary_div"> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Start Time: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblStartTime">8</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>End Time: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblEndTime">7</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Duration: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblDuration">6</div> </div> <div class="case_summary_inner_div"> <div class="summary_value border-bottom-none"> <b>Environment: </b> </div> <div class="summary_value border-right-none border-bottom-none" id="frmtestRunSummary_lblEnvironment">5</div> </div> </div> <div class="case_summary_div"> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Passes: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblPass">4</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Fails: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblFail">3</div> </div> <div class="case_summary_inner_div"> <div class="summary_value"> <b>Warnings: </b> </div> <div class="summary_value border-right-none" id="frmtestRunSummary_lblWarning">2</div> </div> <div class="case_summary_inner_div"> <div class="summary_value border-bottom-none"> <b>Skipped: </b> </div> <div class="summary_value border-right-none border-bottom-none" id="frmtestRunSummary_lblSkipped">1</div> </div> </div> </div>
.case_summary_div{
font-family: Calibri;
font-size: 16px;
color: #333333;
display:inline-table;
border:1px #8d8d8d solid;
width:29%;
}
.case_summary_inner_div{
display:table-row;
height: 30px;
}
.summary_value{
display:table-cell;
vertical-align: middle;
text-align: left;
padding-left: 5px;
border-bottom:1px #8d8d8d solid;
border-right:1px #8d8d8d solid;
}
.border-right-none{
border-right: none;
}
.border-bottom-none{
border-bottom: none;
}