html+css合并表格邊框的示例代碼
發(fā)布時間：2021-03-31 17:10:17 作者：程序猿想成程序獅 
我要評論
我要評論這篇文章主要介紹了html+css合并表格邊框的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
我們給table和td標簽加邊框時，默認使用雙邊框，像這樣。
如果我們希望合并table與td的邊框，可以在table樣式加設(shè)置border-collapse的屬性值為collapse即可。如下圖：
再看效果：
為了便于復(fù)制，這里給出代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid blue;/*表添加邊框*/
border-collapse: collapse;/*合并邊框*/
}
td{
border: 1px solid blue;/*單元格添加邊框*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
</html>
到此這篇關(guān)于html+css合并表格邊框的示例代碼的文章就介紹到這了,更多相關(guān)html合并表格邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
使用html5實現(xiàn)表格實現(xiàn)標題合并的實例代碼
在前端開發(fā)中經(jīng)常會遇到標題合并的需求，今天小編給大家?guī)砹耸褂胔tml5實現(xiàn)表格實現(xiàn)標題合并的實例代碼，感興趣的朋友跟隨小編一起看看吧2019-05-13
表格是日常常用的工具，很多時候需要用到單元合并，本文主要介紹了HTML表格合并的具體實現(xiàn)方式， 具有一定的參考價值，感興趣的可以了解一下2023-01-05
HTML中table表格拆分合并(colspan、rowspan)
這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2021-04-07
這篇文章主要介紹了詳解html中表格table的行列合并問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-07-28
html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼
表格是常見的數(shù)據(jù)統(tǒng)計的一種形式，合并單元格及合并表頭經(jīng)常在復(fù)雜表格中遇到，本文主要介紹了html原生table實現(xiàn)合并單元格以及合并表頭的示例代碼，感興趣的可以了解一下2023-04-28