我正在尝试学习一些 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
TA贡献1966条经验 获得超4个赞
希望这能解决您的问题
将您的表格添加到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>
- 1 回答
- 0 关注
- 66 浏览
添加回答
举报
0/150
提交
取消