我正在嘗試學習一些 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 關注
- 101 瀏覽
添加回答
舉報
0/150
提交
取消