首頁 web前端 html教學 关于css中的border-collapse_html/css_WEB-ITnose

关于css中的border-collapse_html/css_WEB-ITnose

Jun 21, 2016 am 09:04 AM

这个属性以前并没有怎么接触过,该属性有两种1取值:separate 和 collapse
取值的含义具体如下:
separate:边框独立
collapse:相邻边被合并
举例如下:



    
    border-collapse
    


    
        
            
            
            
        
  
one two three

  
        
             
             
             
        
  
one two three



最后效果:


另外表格元素table使用border-radius是不一样的,当表格样式属性border-collapse是collapse时,表格不能正常显示,只有border-collapse属性值为separate时,表格圆角才能正常显示,如将上例的css样式改成如下的时候:
    
    则显示的结果是:


参考地址:

http://www.css88.com/book/css/properties/table/border-collapse.htm


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Stock Market GPT

Stock Market GPT

人工智慧支援投資研究,做出更明智的決策

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

CSS技巧:精確隱藏特定文本內容而不影響父元素 CSS技巧:精確隱藏特定文本內容而不影響父元素 Sep 16, 2025 pm 10:54 PM

本教程詳細介紹瞭如何使用CSS精確隱藏HTML頁面中的特定文本內容,避免因不當選擇器導致整個父元素被隱藏的問題。通過為目標文本的包裹元素添加專屬CSS類,並利用display: none;屬性,開發者可以實現對頁面元素的精細化控制,確保只隱藏所需部分,從而優化頁面佈局和用戶體驗。

捕獲含跨域iframe的父元素mousedown事件:原理與限制 捕獲含跨域iframe的父元素mousedown事件:原理與限制 Sep 20, 2025 pm 11:00 PM

本文探討了在包含跨域iframe的父div上捕獲mousedown事件的挑戰。核心問題在於瀏覽器安全策略(同源策略)阻止了對跨域iframe內容的直接DOM事件監聽。除非控制iframe源域名並配置CORS,否則無法實現此類事件捕獲。文章將詳細解釋這些安全機制及其對事件交互的限制,並提供可能的替代方案。

如何在HTML中製作圖像周圍的文本包裹? 如何在HTML中製作圖像周圍的文本包裹? Sep 21, 2025 am 04:02 AM

usecssfloatpropertytowraptextaroundanimage:floatleftfortextextontheright,floatrightfortextontheleft,addmarginforspacing,and clearFloatFloatStopReventLayOutissues。

如何在html中設置lang屬性 如何在html中設置lang屬性 Sep 21, 2025 am 02:34 AM

setThelangattributeInthehtmltagtagtagtospecifepageLanguage,例如forenglish; 2.使用“ es” es“ es” forspanishor“ fr” forfrench; 3. IncludereVariantswariantswariantswithCountryCountryCodeslike“ en-us” en-us“ en-us”或“ zh-cn”;

JavaScript外部函數調用疑難解析:腳本位置與命名規範 JavaScript外部函數調用疑難解析:腳本位置與命名規範 Sep 20, 2025 pm 10:09 PM

本文探討了在HTML中調用外部JavaScript函數時常見的兩個問題:腳本加載時機不當導致DOM元素未就緒,以及函數命名可能與瀏覽器內置事件或關鍵字衝突。文章提供了詳細的解決方案,包括調整腳本引用位置和遵循良好的函數命名規範,以確保JavaScript代碼能夠正確執行。

如何在HTML中添加懸停的工具提示? 如何在HTML中添加懸停的工具提示? Sep 18, 2025 am 01:16 AM

UsethetitleattributeforsimpletooltipsorCSSforcustom-styledones.1.Addtitle="text"toanyelementfordefaulttooltips.2.Forstyledtooltips,wraptheelementinacontainer,use.tooltipand.tooltiptextclasseswithCSSpositioning,pseudo-elements,andvisibilityc

如何在HTML中創建與電子郵件地址的超鏈接? 如何在HTML中創建與電子郵件地址的超鏈接? Sep 16, 2025 am 02:24 AM

usemailto:inhreftCreateeMaillinks.startwithforbasiclinks,add? object = and&body = forpre-flycontent,andIncludeMultipleDresseSorcc =,bcc = foradvancedOptions。

Bootstrap Flexbox佈局中實現元素垂直堆疊:從並排到分層 Bootstrap Flexbox佈局中實現元素垂直堆疊:從並排到分層 Sep 21, 2025 pm 10:42 PM

在使用Bootstrap進行網頁佈局時,開發者常遇到元素默認並排顯示而非垂直堆疊的問題,尤其當父容器應用了Flexbox佈局時。本文將深入探討這一常見佈局挑戰,並提供解決方案:通過調整Flex容器的flex-direction屬性為column,利用Bootstrap的flex-column工具類,實現H1標籤與表單等內容塊的正確垂直排列,確保頁面結構符合預期。

See all articles