如何使用CSS在表格的两行之间添加空格？

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过各种示例了解如何使用CSS在表格的两行之间添加空格。我们可以使用CSS属性（如border-spacing和border-collapse）在表格的两行之间添加空格。我们可以在行之间添加水平和垂直间距。

以下是如何使用CSS在表格的两行之间添加空格的示例。

示例 1

<! 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>

说明

在上面的示例中，我们创建了一个使用CSS在两个表格行之间添加空格的示例。在此，我们通过遵循CSS属性在表格行之间添加了空格。

border-collapse: separate;
border-spacing: 0 15px;

border-spacing 属性用于设置表格单元格之间的空格，而 border-collapse 属性用于指定表格边框是否折叠。

输出

以下是这个例子的输出。

How to add Space between two rows in a table using CSS

示例 2

<! 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>

说明

在上面的示例中，我们创建了一个使用CSS在两个表格行之间添加空格的示例。在此，我们在表头和表体之间添加了空格。

输出

以下是这个例子的输出。

下一主题#

如何使用CSS在表格的两行之间添加空格？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何使用CSS在表格的两行之间添加空格？

示例 1

示例 2

相关帖子

Define CSS Portal

如何使用 CSS 创建闪烁文本

CSS Placeholder

CSS ID Selector

CSS Display Flex

CSS Validator

CSS Ellipsis

CSS 中如何更改图片大小

CSS 中如何更改链接颜色

CSS 文本抖动效果

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器