我想在表格行之间添加空白，就像下面的图片一样：
如何在表格行上添加边距
4
- Mengseng Oeng
8
2请添加您的HTML和CSS - Nick Parsons
1你可以写一个新的，这只是一个简单的表格。 - Mengseng Oeng
2如果可能的话，请把你的代码展示给我看。你只需要展示你所使用的代码即可。 - Maniraj Murugan
我尝试在<tr>上添加边距，但没有成功。请告诉我如何在表格行上添加边距？ - Mengseng Oeng
1你不能给 tr 元素添加 margin，只能给 td 添加，并且最好使用 padding。你可以使用 style 标签并使用 tr > td { padding: 20px; }。 - David Bray
显示剩余3条评论
7个回答
9
边框间距属性(border-spacing)适用于这种情况。
table {
border-collapse:separate;
border-spacing: 0 1em;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-spacing
或者你可以使用一些“hacky”的方法。这些方法可以在表格行之间产生外边距的效果。
tr{
border: 5px solid white;
}
- f00d
1
如果我已经有一个实心黑色边框，我可以同时使用吗？ - Jerin Mathew
4
您可以使用
border-spacing。这里是一个简单的示例。
table, th, td {
background: #ffffff;
padding: 5px;
}
table {
background: #999999;
border-spacing: 15px;
}<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>https://www.w3schools.com/html/html_tables.asp
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing
- Partho63
3
您不能给表格行添加边距。您可以将边框折叠和表格间距应用于表格，或者给表格行添加边框并将其颜色更改为表格背景颜色。请参考下面的链接。
谢谢。 http://jsfiddle.net/x1hphsvb/10966/
谢谢。 http://jsfiddle.net/x1hphsvb/10966/
table{
border-collapse: separate;
border-spacing: 0 20px;
background-color: #e3e7ee
}
table tr td{
padding:20px !important;
background-color:white;
}
/* this is the second option */
tr{
/* border:2px solid #e3e7ee !important */
}<table class="table ">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>- Xenio Gracias
3
border-spacing 属性设置相邻单元格边框之间的距离。
注意：此属性仅在 border-collapse 为 separate 时有效。
table {
border-collapse: separate;
border-spacing: 15px;
}
- Sushil
1
尝试使用这个设计
或者访问演示获取更多代码。
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
.caseTableWrap {
margin-bottom: 50px;
background: #f5f5f5;
padding: 20px; }
.caseTable {
border-collapse: separate;
border-spacing: 0 20px; }
.caseTable tr {
-webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
.caseTable tr + tr {
cursor: pointer; }
.caseTable tr + tr:hover {
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); }
.caseTable tr .caseTableData:last-child, .caseTable tr th:last-child, .caseTable tr td:last-child {
max-width: 220px; }
.caseTable tr th {
border: none;
font-size: 18px;
font-weight: 500; }
.caseTable tr th:first-child {
border-radius: 8px 0 0 8px; }
.caseTable tr th:last-child {
border-radius: 0 8px 8px 0; }
.caseTable tr td {
border: none;
position: relative; }
.caseTable tr td:first-child {
border-radius: 8px 0 0 8px; }
.caseTable tr td:last-child {
border-radius: 0 8px 8px 0; }
.caseTable tr .caseTableData, .caseTable tr th, .caseTable tr td {
background: #fff;
padding: 20px;
position: relative; }
.caseTable tr .caseTableData p, .caseTable tr th p, .caseTable tr td p {
color: #484848;
font-size: 16px;
font-weight: 400; } <div class="caseTableWrap">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="caseTableInner">
<h3 class="secTitle">
<div class="text">
Recent Case
</div>
</h3>
<div class="caseTableWrap table-responsive">
<table class="table caseTable">
<tr>
<th>Case ID</th>
<th>Created Date</th>
<th>Expiry Date</th>
<th>Status</th>
</tr>
<tr>
<td>75814</td>
<td>01 January 2020</td>
<td>30 January 2020</td>
<td>Delivered</td>
</tr>
<tr>
<td>75814</td>
<td>01 January 2020</td>
<td>30 January 2020</td>
<td>Delivered</td>
</tr>
<tr>
<td>75814</td>
<td>01 January 2020</td>
<td>30 January 2020</td>
<td>Delivered</td>
</tr>
<tr>
<td>75814</td>
<td>01 January 2020</td>
<td>30 January 2020</td>
<td>Delivered</td>
</tr>
<tr>
<td>75814</td>
<td>01 January 2020</td>
<td>30 January 2020</td>
<td>Delivered</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>- Masud Rana
0
您可以使用与背景相同的颜色添加顶部和底部边框
table{
width: 100%;
border-collapse: collapse;
}
tr{border-bottom: 4px solid white;border-radius: 10px;}
th{ background-color: white;}
td{ background-color: grey;}<table>
<thead>
<tr>
<th>Name</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>BDR</td>
<td>1</td>
</tr>
<tr>
<td>Bader</td>
<td>2</td>
</tr>
</tbody>
</table>- BDR
0
最佳选择：
*{box-sizing: border-box}
table {
border-collapse: separate;
}
tr > td {
display: inline-block;
margin-top: 1rem;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
tr > td:first-of-type {
border-left: 1px solid black;
}
- jacek
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接