Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
Difference between CSS border-collapse:collapse; and border-collapse:separate;
The following image justifies the difference between collapse and separate. The separate value of the border-collapse property separates the borders of the cells:
Example
You can try to run the following code to understand the difference between border-collapse separate and collapse value:
<html>
<head>
<style>
table.one {
border-collapse:collapse;
}
table.two {
border-collapse:separate;
}
td.a {
border-style:dotted;
border-width:2px;
border-color:#000000;
padding: 20px;
}
td.b {
border-style:solid;
border-width:2px;
border-color:#333333;
padding:20px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Border Collapse</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
<br />
<table class = "two">
<caption>Border Separate</caption>
<tr><td class = "a"> India</td></tr>
<tr><td class = "b"> Australia</td></tr>
</table>
</body>
</html> 
Updated on: 2020-01-31T10:06:18+05:30
258 Views
Advertisements