Saya pada masa ini mempunyai jadual dengan kandungan saya tetapi ia kelihatan seperti Saya mahu ada ruang di antara setiap baris supaya ia dipisahkan dengan jelas dan kelihatan seperti ini
Saya cuba menggunakan padding pada elemen td dan jarak sempadan pada elemen tr. Apakah cara paling mudah untuk melakukan ini dalam bootstrap 5? Di bawah ialah HTML dan CSS
saya
.icon-green {
color: green;
}
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa anda telah menyelesaikan kebanyakan masalah anda, kecuali kerana semuanya berwarna putih, sukar untuk melihat bahawa terdapat ruang antara baris. Menambahkan sedikit bayangan kotak pada baris. Saya tidak pasti bagaimana anda menggunakan bootstrap di sini, tetapi saya fikir jika anda ingin mengatasi gaya bootstrap, ia adalah serupa
table { border-collapse: separate; border-spacing: 0px 15px; } tr{ /* only added this line */ box-shadow:0px 1px 2px 3px rgba(0, 0, 0, 0.142); } th, td { width:100%; background-color:white; text-align: center; vertical-align: middle; padding: 5px; }