在CSS中可以使用border-collapse屬性來合并表格邊框；border-collapse屬性用于設(shè)置表中存在的單元格的邊框，并告知這些單元格是否共享公共邊框。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比鹽城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鹽城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鹽城地區(qū)。費用合理售后完善，十年實體公司更值得信賴。
border-collapse屬性設(shè)置表格的邊框是否被合并為一個單一的邊框。
語法：
屬性值：
● separate：用于設(shè)置單元格的單獨邊框。
● collapse：用于折疊相鄰的細(xì)胞并形成共同的邊界。
● initial：用于將border-collapse屬性設(shè)置為其默認(rèn)值。
● inherit：當(dāng)border-collapse屬性從其父元素繼承時使用。
示例：
效果圖：
瀏覽器支持
border-collapse屬性支持的瀏覽器如下：
● Apple Safari 1.2
● 谷歌Chrome 1.0
● Internet Explore / Edge 5.0
● Opera 4.0
● Firefox 1.0
更多 css 的相關(guān)知識，可訪問： web前端課程 ！!
border-collapse 屬性：設(shè)置表格的邊框是否被合并為一個單一的邊框，即：用于設(shè)置表格邊框是合并顯示還是分開顯示。
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個單一的邊框。它有以下幾個值：
-- separate 默認(rèn)值：邊框會被分開，不會忽略 border-spacing 和 empty-cells 屬性；
-- collapse：如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性；
-- inherit：規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。
雙線表格邊框的實現(xiàn)
html代碼：
table
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
tr
td內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/tdtd內(nèi)容/td
/tr
/table
css代碼：
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse：separate；
}
table td{
padding: 10px 30px;
}
表格邊框的雙線樣式其實很簡單，只要同時設(shè)置表格外邊框和table里的每個單元格的邊框，就可以實現(xiàn)了。
因為separate是默認(rèn)值，就算是不設(shè)置border-collapse：separate；表格也會呈現(xiàn)雙線效果。
我們主要是來看看border-collapse屬性合并邊框，實現(xiàn)單線邊框的方法，html代碼一樣，只需設(shè)置css樣式：
css代碼：
table,table tr td {
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}table tr td {
padding: 10px 30px;
}
單線邊框的實現(xiàn)也很簡單，它是在雙線樣式的基礎(chǔ)上，設(shè)置border-collapse: collapse;
把相鄰的兩個table邊框合并成一個，使得相鄰的兩條線并在一起，邊框就以單線的形式顯示了。
總結(jié)：表格邊框的無論是單線邊框樣式，還是雙線邊框樣式都在前端頁面中應(yīng)用廣泛，大家可以根據(jù)自己
表格的邊框分為3個元素決定：table,th,td;
如果三種元素全部設(shè)置了border樣式，那么會發(fā)現(xiàn)外層有2層border,里面的th與th，td與td,td與th之間的border也是有2層的，所以，在設(shè)置border之前最好先想好通過什么樣的規(guī)則來展現(xiàn)boeder(因為方式很多，那么我們只能選擇適合自己的-也就是用的習(xí)慣的)。另外，表格之間還有一個概念是表空間,可以通過給表格設(shè)置樣式table{ border-collapse:collapse; border-spacing:0;}清除這些多余的空間，那么有了上面的準(zhǔn)備工作之后，下面就開始border樣式的設(shè)置--代碼如下：
td,th{border-bottom: 1px solid #e3e3e3;//xia下邊框border-right:1px solid #e3e3e3;//有邊框}
html
headtitleHTML
Table/title/head
style
type="text/css"
TABLE
{
border-collapse:
separate;
border:
2px
solid
blue;
}
.one{
border-left:none;
border-right:1px
solid
#f00;
border-top:1px
solid
#f00;
border-bottom:1px
solid
#f00;}
/style
body
table
summary="TechRepublic.com
-
Tables
and
CSS"
theadtr
thabbr="salesperson"
scope="col"Person/th
thabbr="sales"
scope="col"Sales/th
/tr/thead
tbodytr
td
class="one"Mr.
Smith/td
td600.00/td
/trtr
tdMr.
Jones/td
td0000.00/td
/trtr
tdMs.
Williams/td
td
class="one"0000.00/td
/tr/tbody
tfoottr
tdLet's
sale,
sale,
sale!/td
/tr/tfoot/table/body/html
我設(shè)置了一個樣式one，單元格左邊沒有邊框，上下和右邊有邊框，顏色你可以自己設(shè)置。
1.所有的均為細(xì)邊框。\x0d\x0atable,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}\x0d\x0a\x0d\x0a2.指定的為細(xì)邊框，把放在中，用ID作索引，如下：\x0d\x0a#mdA table,#mdA table td,#mdA table th{border:1px solid #ff0000;border-collapse:collapse;}\x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0a \x0d\x0a
\x0d\x0a \x0d\x0a
\x0d\x0a \x0d\x0a
\x0d\x0a \x0d\x0a\x0d\x0a
回答于?2022-11-16
搶首贊
已踩
查看全部1個回答
立即下載
— 為你推薦更多精彩內(nèi)容 —
正在加載
加載失敗 點擊重新加載
微信
微博
QQ空間
答案糾錯
舉報
取消
贊賞答主
5
10
50
100
200
已贊賞0財富值
合計：0 財富值
登錄后贊賞
選擇舉報類型
侵犯版權(quán)
色情低俗
涉嫌違法犯罪
時政信息不實
垃圾廣告
低質(zhì)灌水
工作人員會在48小時內(nèi)處理,處理結(jié)果請關(guān)注系統(tǒng)通知,感謝您對百度知道的支持。
確定
void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15;var e=new Date;e.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+";path=/;expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^;]*)(;|$)"));return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT");if(a){h("PMS_JT","",-1);try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.rand;d="https:"===a.location.protocol?""+d:""+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js");
window.tt = 1669146605;
方法/步驟
1
一個普通的表格如下：
2
相關(guān)設(shè)置
單元格邊距(表格填充)(cellpadding) -- 代表單元格外面距離,用于隔開單元格與單元格之間的空間 單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補(bǔ)白的距離。
具體代碼如下：
table border='1'cellspacing="0" cellpadding="0" tr td width="200"1/td td width="200"2/td td width="200"3/td /tr tr tda/td tdb/td tdc/td /tr tr td中國/td td我/td td愛你/td /tr /table
效果如圖
3
文字不居中？
設(shè)置一下就好了。
代碼如下：
style type="text/css".onecenter{text-align:center;width:200px;}/styletable border='1'cellspacing="0" cellpadding="0" tr td class='onecenter'1/td td class='onecenter'2/td td class='onecenter'3/td /tr tr td class='onecenter'a/td td class='onecenter' b/td td class='onecenter' c/td /tr tr td class='onecenter' 中國/td td class='onecenter' 我/td td class='onecenter' 愛你/td /tr /table
為了方便一點我直接把樣式寫在上面了。
4
效果如圖：
5
每一個表格都是一個完整的方框，如果想要線條更細(xì)。
看如下代碼：
style type="text/css".onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699 ;padding:20px;color:#FFF;}/styletable border='1'cellspacing="0" cellpadding="20" tr td class='onecenter'1/td td class='onecenter' style='border-left:0px;border-right:0px;' 2/td td class='onecenter'3/td /tr tr td class='onecenter'a/td td class='onecenter' style='border:0px' b/td td class='onecenter' c/td /tr tr id='se' td class='onecenter' 中國/td td class='onecenter' 我/td td class='onecenter' 愛你/td /tr /table
這段代碼主要是針對某些表格做了些設(shè)置，讓某些表格不顯示出來。
重慶分公司
重慶分公司
