In this tutorial, we will explore the process of inserting gaps between two rows within a table using CSS, accompanied by multiple illustrations. The spacing between rows can be adjusted in a table by utilizing CSS properties like border-spacing and border-collapse, allowing for the inclusion of both horizontal and vertical intervals between rows.
Here are some instances demonstrating how to insert space between two rows within a table using CSS.
Example 1:
Example
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> How to add Space between two rows in a table using CSS? </title>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
*:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table {
border-collapse: collapse;
text-align: center;
}
th {
background-color: blue;
Color: white;
}
th {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px;
}
td {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px
}
.gs {
border-right: hidden;
}
.gg {
border-collapse: separate;
border-spacing: 0 15px;
}
html {
font-size: 15px;
font-family: sans-serif;
}
body {
text-align: center;
padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 19% }
100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 19% }
100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 19% }
100% { background-position: 0% 82% }
}
@keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 19% }
100% { background-position: 0% 82% }
}
h2 {
text-align: center;
color: #46a294;
font-size: 28px;
width: 100%;
margin: 10px 10;
position: relative;
line-height: 58px;
font-weight: 400;
}
h2:before {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 2px;
font-weight: bold;
background-color: #2079df;
margin-left: -50px;
}
h1 {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 200;
font-size: 40px;
color: red;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
caption {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 100;
font-size: 30px;
color: red;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
</style>
<body>
<h1> Example </h1>
<h2> How to add Space between two rows in a table using CSS? <br> <br> </h2>
<center> <br> <br>
<table>
<caption> Student Details <br> <br> <br> </caption>
<tr>
<th> Roll </th>
<th> Name </th>
<th> Class </th>
<th> Gender </th>
<th> Phone Number </th>
<th> Age </th>
</tr>
</table>
<table class = "gg">
<tr>
<td class = "gs"> 1 </td>
<td> Thomas </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr>
<td class = "gs"> 2 </td>
<td> Thomes </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr>
<td class = "gs"> 3 </td>
<td> Thom </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr>
<td class = "gs"> 4 </td>
<td> Arjun </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr>
<td class = "gs"> 5 </td>
<td> Arjun </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
</table>
</center>
</body>
</html>
Explanation:
In the previously shown example, we demonstrated a method to insert a gap between two rows within a table using CSS. Specifically, we achieved this by applying a CSS property to create separation between the table rows.
Example
border-collapse: separate;
border-spacing: 0 15px;
The border-spacing attribute is employed to define the gaps between the cells within a table, while the border-collapse property is utilized to determine if the table border should collapse or not.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title> How to add Space between two rows in a table using CSS? </title>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
*:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
thead tr { box-shadow: 0 1px 10px #000000; }
th { background-color: #ccc; }
th {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px
}
td {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px
}
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
tbody:before {
margin: 2px;
line-height: 2em;
content: " ";
color: white;
display: block;
}
html {
font-size: 15px;
font-family: sans-serif;
}
body {
text-align: center;
padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 16s ease infinite;
-o-animation: rainbow 16s ease infinite;
animation: rainbow 16s ease infinite; }
@-webkit-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 29% }
100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 29% }
100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 29% }
100% { background-position: 0% 72% }
}
@keyframes rainbow {
0% { background-position: 0% 82% }
50% { background-position: 100% 29% }
100% { background-position: 0% 72% }
}
h2 {
text-align: center;
color: #46a294;
font-size: 28px;
width: 100%;
margin: 10px 10;
position: relative;
line-height: 58px;
font-weight: 400;
}
h2:before {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 2px;
font-weight: bold;
background-color: #2079df;
margin-left: -50px;
}
h1 {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 200;
font-size: 40px;
color: red;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.6s ease 0s;
}
caption {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 100;
font-size: 30px;
color: red;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.6s ease 0s;
}
</style>
<body>
<h1> Example <br> </h1>
<h2> How to add Space between two rows in a table using CSS? <br> </h2>
<center> <br> <br> <br>
<table>
<caption> Student Details <br> <br> <br> </caption>
<tr>
<thead>
<th> Roll </th>
<th> Name </th>
<th> Class </th>
<th> Gender </th>
<th> Phone Number </th>
<th> Age </th>
</thead>
</tr>
<tbody>
<tr class="even">
<td> 1 </td>
<td> Thomas </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr class ="odd">
<td> 2 </td>
<td> Thomes </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr class="even">
<td> 3 </td>
<td> Thom </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr class ="odd">
<td> 4 </td>
<td> Arjun </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
<tr class="even">
<td> 5 </td>
<td> Thom </td>
<td> BA </td>
<td> M </td>
<td> 45589800878 </td>
<td> 32 </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Explanation:
In the previously mentioned instance, we have demonstrated how to insert a gap between two rows in a table using CSS. Additionally, we have included a space between a table header and table content.
Output:
Following is the output of this example.