empty-cells

以下特徵可以用來設定報表（TABLE）內的小格子（cell）的邊線之展現方法。另外也可以用 border, padding, outline 設定格子的邊界。

border-collapse | border-spacing | empty-cells

empty-cells

必須先設定 border-collapse:separate 才能使用這個特徵，此特徵指定空白格子是否要畫邊線。空白格子是指，格子內容不需要展現。例如風格設為 visibility:hidded；或是以下字元：CR (\0D), LF (\0A), tab (\09), 空白(\20)。但是   並非不可見的內容。

• show：畫出邊線，此為預設值。
• hide：不要邊線。
• inherit：繼承父元件的特徵值。

<style type='text/css'> .ept {border-collapse:separate; empty-cells:hide; width:40% } .ept TD {border:1px solid red} </style> <table class='ept'> <tr> <td style='visibility:hidden'>蔡依林 <td>曾沛慈 <tr> <td>周杰倫 <td><!--蕭敬騰--> <tr> <td style='empty-cells:show'> <td>吳宗憲 <tr> <td> <td>&nbsp; </table>

• 上例中，最後一格放的是 &nbsp;，所以會畫出邊線。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {border-collapse:separate; border-spacing:32px 0px; } .hvr TD {border:solid 1px red} .hvr:hover {border-spacing:4px 0px;} .hvr:active {border-collapse:collapse;} </style> <table class='hvr'> <tr><td>射擊遊戲<td>好玩遊戲 <td>賽車遊戲<td>小遊戲 </table>

javascript 應用。可以用 style 物件 的特徵 borderCollapse, borderSpacing, emptyCells 讀取或設定特徵值。 <table id='atr7' style='border-collapse:separate;border-spacing:8px;empty-cells:hide;'> <tr> <td>射擊遊戲 <td>好玩遊戲 </table> <script type='text/javascript'> var os=document.getElementById('atr7').style; document.write( os.borderCollapse +'<br />'+ os.borderSpacing +'<br />'+ os.emptyCells ); </script>

• 不同瀏覽器的輸出格式有不同。
• IE6 沒有 borderSpacing, emptyCells 兩項。