2014年10月8日 星期三

【CSS】顯示表格空白(empty-cells)、框線合併(border-collapse)

empty-cells
empty-cells:show -> 顯示空白表格
empty-cells:hide -> 不顯示空白表格 - 預設
empty-cells:inherit -> 繼承父屬性
1 2
3
border-collapse
border-collapse:collapse -> 框限線會合併
border-collapse:separate -> 框線分開
1 2
3
<style>
#wsxrtgvbuikm14010082 .t1{
	color:#1A6811;
	font-family: "微軟正黑體";
	font-size:24px;
	padding: 0 10px;
}

#wsxrtgvbuikm14010082 .t2{
	color:#1F1C97;
	font-family: "微軟正黑體";
	font-size:16px;
	padding: 0 10px;
	margin-top:8px;
	margin-bottom:8px;
}

#wsxrtgvbuikm14010082 .t3{
	color:#000;
	font-family: "微軟正黑體";
	font-size:16px;
	padding: 0 5px;	
}

#wsxrtgvbuikm14010082 .table-1 {
	width:300px;
	margin-left:10px;
}

#wsxrtgvbuikm14010082 .table-1 td{
	border:1px solid #0088dd;
	padding:15px;
	empty-cells:hide;
	
}

#wsxrtgvbuikm14010082 .table-2 {
	width:300px;
	border-collapse:collapse;
	margin-left:10px;
}

#wsxrtgvbuikm14010082 .table-2 td{
	border:1px solid #0088dd;
	padding:15px;
	empty-cells:hide;
	
}
</style>
<div id="wsxrtgvbuikm14010082">
  <div class="t1">empty-cells</div>
  <div class="t2">empty-cells:show -> 顯示空白表格</div>
  <div class="t2">empty-cells:hide -> 不顯示空白表格 - 預設</div>
  <div class="t2">empty-cells:inherit -> 繼承父屬性</div>
  <div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-1">
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
      </tr>
    </table>
  </div>
  
  <div class="t1" style="margin-top:30px;">border-collapse</div>
  <div class="t2">border-collapse:collapse -> 框限線會合併</div>
  <div class="t2">border-collapse:separate -> 框線分開</div>
  <div>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" class="table-2">
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
      </tr>
    </table>
  </div>
  

沒有留言:

張貼留言