雖然第三方表格插件多不勝數(shù)，但是很多場(chǎng)景還是需要用到原生<table>，掌握html原生table的實(shí)現(xiàn)方法，是前端開(kāi)發(fā)的必備技能。例如：print-js打印、html2canvas生成圖片等，用原生table可以規(guī)避很多問(wèn)題。
首先，在寫(xiě)原生<table>之前，我們先認(rèn)識(shí)一下?border-collapse 屬性：
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是像在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-550034.html
大多數(shù)情況下，我們要求表格的邊框合并為單一邊框，要實(shí)現(xiàn)這樣的效果，有如下兩種方式：
一、利用css屬性 border-collapse: collapse設(shè)置邊框
html部分：
<table style="width: 100%" border="1" cellspacing="1"> <thead> <tr> <th rowspan="2">姓名</th> <!-- rowspan代表單元格縱向合并 --> <th colspan="2">個(gè)人信息</th> <!-- colspan代表單元格橫向合并 --> </tr> <tr> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>男</td> <td rowspan="2">30</td> </tr> <tr> <td>小紅</td> <td>女</td> </tr> </tbody> </table>
table { border-collapse: collapse; //合并為一個(gè)單一的邊框 border-color: #dfe6ec; //邊框顏色按實(shí)際自定義即可 } thead tr th { background-color: #f8f8f9; //設(shè)置表格標(biāo)題背景色 padding: 6px; text-align: center; } tbody tr td { padding: 6px; text-align: center; height: 34px;//設(shè)置單元格最小高度
}
<table style="width: 100%" border="0" cellspacing="0"> <thead> <tr> <th rowspan="2">姓名</th> <th colspan="2">個(gè)人信息</th> </tr> <tr> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>男</td> <td rowspan="2">30</td> </tr> <tr> <td>小紅</td> <td>女</td> </tr> </tbody> </table>
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-550034.html
css部分：
table { border-collapse: separate; border-top: 1px solid #dfe6ec; border-left: 1px solid #dfe6ec; } thead tr th { background-color: #f8f8f9; padding: 6px; text-align: center; border-bottom: 1px solid #dfe6ec; border-right: 1px solid #dfe6ec; } tbody tr td { padding: 6px; text-align: center; height: 34px;//設(shè)置單元格最小高度 border-bottom: 1px solid #dfe6ec; border-right: 1px solid #dfe6ec; }
?
以上一、二兩種方式展示表格效果均如下：
在使用html2canvas生成<table>圖片的時(shí)候，如果用方式一，會(huì)導(dǎo)致生成的圖片表格邊框過(guò)粗，效果如下：
而用方式二手動(dòng)設(shè)置邊框，生成的圖片和網(wǎng)頁(yè)顯示的表格一致，如下圖所示：
因此，生成圖片等場(chǎng)景，推薦使用方式二手動(dòng)設(shè)置表格邊框的方式實(shí)現(xiàn)原生table.
?
?注：cellpadding與cellspacing的區(qū)別如下
cellpadding 屬性規(guī)定單元邊沿與單元內(nèi)容之間的空間，以像素計(jì)。
cellspacing 屬性規(guī)定單元之間的空間，以像素計(jì)。若不設(shè)置該屬性，則其默認(rèn)值為 cellspacing="2"。
?HTML5 不支持cellpadding與cellspacing屬性，cellpadding可使用CSS 代替，設(shè)置td和th的內(nèi)邊距padding即可。
?
?
到了這里，關(guān)于html實(shí)現(xiàn)原生table并設(shè)置表格邊框的兩種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
