今天就跟大家聊聊有關(guān)如何使用html5+CSS控制Table內(nèi)外邊框和顏色以及大小，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

目前創(chuàng)新互聯(lián)建站已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、新樂(lè)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

其實(shí)按照常理來(lái)說(shuō)，現(xiàn)在的網(wǎng)站應(yīng)該早已經(jīng)拋棄什么表格了，現(xiàn)在肯定是p+CSS當(dāng)?shù)缆铮〔贿^(guò)客戶(hù)的網(wǎng)站在添加內(nèi)容的時(shí)候始終不滿(mǎn)意那些邊框效果：要么沒(méi)有，要么很粗。看得出來(lái)，這位客戶(hù)是位完美主義者。

在默認(rèn)的情況下，我們的CSS將Table的邊框清除掉了，是沒(méi)有的，看到的效果是這樣的。

無(wú)邊框Table

為了給，表格加一個(gè)邊框，我在CSS里面寫(xiě)了這樣一句：

.table{border:solid 1px #add9c0;}

哎，看來(lái)是我太天真了，瀏覽器里看到的效果是這樣的：

只有外邊框的Table

好吧，我承認(rèn)，我確實(shí)已經(jīng)有些年頭沒(méi)有動(dòng)過(guò)Table了，不過(guò)這完全不是我的責(zé)任，因?yàn)門(mén)able其實(shí)已經(jīng)被大眾設(shè)計(jì)師們拋棄了。于是我就刪掉那句CSS樣式，重新這樣寫(xiě)了這樣一句：

.td{border:solid 1px #add9c0;}

不過(guò)杯具依然發(fā)生，像客戶(hù)要求這么細(xì)的人，怎么能忍受Table表格的內(nèi)邊框這么粗呢？

內(nèi)邊框很粗的Table

沒(méi)有辦法，只好出絕招了，刪掉剛剛寫(xiě)的CSS代碼，直接寫(xiě)入：

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

好了，這下看你還敢囂張？這不就乖乖地就范了嗎？

邊框很細(xì)的Table

親密無(wú)間是沒(méi)有罪過(guò)的，但是文字內(nèi)容和表格邊框親密到?jīng)]有空隙就影響到美觀(guān)了，于是將剛剛那兩句代碼稍作修改：

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

如果需要td兩邊都不需要那么親密的話(huà)，就這樣寫(xiě)：

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

好了，現(xiàn)在來(lái)看看最后的效果吧，這個(gè)時(shí)候客戶(hù)已經(jīng)非常開(kāi)心了，他要的就是這個(gè)效果！

理想效果的Table

如果大家在其他地方用到這樣的方法的時(shí)候，一定要注意CSS代碼的規(guī)范寫(xiě)法：

推薦寫(xiě)法：border-width:0px 1px 1px 0px;

不推薦：border-width:0 1 1 0;

最后還是提醒大家，能不用Table就盡量不要用Talbe吧，畢竟不是多么先進(jìn)的技術(shù)了，應(yīng)該試著往p+CSS這方面努力！

看完上述內(nèi)容，你們對(duì)如何使用html5+CSS控制Table內(nèi)外邊框和顏色以及大小有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前題目：如何使用html5+CSS控制Table內(nèi)外邊框和顏色以及大小
文章網(wǎng)址：http://www.chinadenli.net/article2/ieogic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)