1. 程式人生 > >div 寫table 自適應表格

div 寫table 自適應表格

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