CSS表格侧边框间距问题
我正在尝试学习一些 HTML 和 CSS 技能，但遇到一个问题，在网上找不到任何合适的解决方案。
我正在尝试在设计的表格两侧添加一些边框间距。请参阅附图以便更好地理解
当前表： https: //i.stack.imgur.com/Gj8tL.jpg
所需的表： https: //i.stack.imgur.com/UzmKO.jpg
我的代码：
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
<style>
table {
text-align: center;
font-size: 10pt;
height: 22px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
bgcolor="#ffffff";
font-family: calibri;
color: #707070;
width: 50%;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
<br><br><br>
</body>
你们能帮我一个正确的解决方案吗？
至尊宝的传说1回答
-
慕标5832272
希望这能解决您的问题将您的表格添加到div“然后应用”padding框中box-shadow( div)。table { text-align: center; font-size: 10pt; height: 22px; width:100%; font-family: calibri; color: #707070; border-collapse: collapse; } th, td{ padding-top: 10px; padding-bottom: 10px; } tr { padding-top: 10px; padding-bottom: 10px; border: solid #1AAE9F; border-width: 1px 0; } tr:first-child { border-top: none; } tr:last-child { border-bottom: none; } .table-box { padding:20px; border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11); }<html dir="ltr"><head> <meta charset="utf-8"> <title>Deshe Email Monthly Update</title></head><body> <div class="table-box"> <table> <tr> <th>Symbol</th> <th>Position</th> <th>Return</th> </tr> <tr> <td>AAPL</td> <td>Short</td> <td>40.1%</td> </tr> <tr> <td>AAPL</td> <td>Short</td> <td>40.1%</td> </tr> </table> </div></body></html>
随时随地看视频慕课网APP
相关分类
Html5
