html表格边距问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html表格边距问题相关的知识,希望对你有一定的参考价值。
自己在学写网站
用到了<table>,但是表格中的文字总是贴着顶部,用<br />效果很差,怎样让文字居中,不仅是水平方向居中,竖直方向也居中呢?
cellspandding="4" cellspacing="4"
这两个属性是用来调节文字与边框之间的距离的,你可以把4换成更大的数试试,
水平剧中 align="center" 垂直居中是vlign="center"
你试试吧
如何在表格行上添加边距
【中文标题】如何在表格行上添加边距【英文标题】:How to add margin on table row 【发布时间】:2019-05-27 18:05:04 【问题描述】:我想在表格的行之间添加空格,如下图所示:
如果可能,请向我展示您的代码。
【问题讨论】:
请添加您的 HTML 和 CSS 你可以写一个新的。它只是一个简单的表格。 "如果可能,请向我展示您的代码。"您只需要显示您使用过的代码.. 我尝试在您可以使用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
【讨论】:
【参考方案2】:border-spacing 属性适用于这种特殊情况。
table
border-collapse:separate;
border-spacing: 0 1em;
https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
或者您可以使用 hacky 方法。这使得表格行之间的边距出现 i
tr
border: 5px solid white;
【讨论】:
如果我已经有了纯黑色边框怎么办。我可以同时使用吗?【参考方案3】:border-spacing 属性设置相邻单元格边框之间的距离。
注意:该属性仅在border-collapse分离时有效。
table
border-collapse: separate;
border-spacing: 15px;
【讨论】:
【参考方案4】:您不能给表格行留出边距。您可以为表格提供边框折叠和边框间距,或者为表格行提供边框并将其颜色更改为表格背景颜色。请参考以下链接。
谢谢
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>
【讨论】:
【参考方案5】:最佳选择:
*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;
【讨论】:
【参考方案6】:尝试将其用于设计
或访问demo获取更多代码
@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>
【讨论】:
以上是关于html表格边距问题的主要内容,如果未能解决你的问题,请参考以下文章