简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css中的關於empty-cells的問題

黄舟
發布： 2017-06-30 13:25:48
原創
1536 人瀏覽過

發現在css中，當把border-collapse設定為separate為，要不要empty-cells結果是一樣的，而且用show與hide值都一樣，望各位指點。

在css2標準中
語法：

empty-cells : show | hide
登入後複製

取值：
show  :  預設值。顯示邊框
hide  :  隱藏邊框

說明：
設定或擷取當表格的儲存格無內容時，是否顯示該儲存格的邊框。
只有當表格行和列的邊框獨立（例如當 border-collapse 屬性等於 separate ）時此屬性才會起作用。
對應的腳本特性為 emptyCells 。

這是個css2的標準不為IE所支持，在Firefox中可以正常顯示效果，具體效果的演示代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table test</title>
<style>
#layout {}
.show {border: 1px solid #ff0000; border-collapse:separate; empty-cells: show;}
.hide {border: 1px solid #ff0000; border-collapse:separate; empty-cells: hide;}
</style>
</head>

<body>
<table id="layout">
  <tr>
    <td class="show">Cascading</td>
    <td class="show"></td>
  </tr>
  <tr>
    <td class="hide">Cascading</td>
    <td class="hide"></td>
  </tr>
 </table>
</body>
</html>
登入後複製

可以看到show的時候空表格被顯示出來，hide的時候空表格被隱藏

以上是css中的關於empty-cells的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css
來源：php.cn
上一篇：css table中empty-cells屬性的具體分析 下一篇：IE6 IE7 IE8(Q)不支援empty-cells特性的解決方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1806
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
10
1951
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1657
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1558
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1590
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！