国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Erstellen Sie mit HTML und Bootstrap 5 Abstand zwischen Zeilen in der Tabelle

P粉300541798 2024-03-29 15:09:13

500

Ich habe derzeit eine Tabelle mit meinen Inhalten, aber es sieht so aus Ich m?chte, dass zwischen den einzelnen Reihen Platz ist, damit sie klar voneinander getrennt sind und so aussehen

Ich habe versucht, Polsterung für das td-Element und Randabst?nde für das tr-Element zu verwenden. Was ist der einfachste Weg, dies in Bootstrap 5 zu tun? Unten ist mein HTML und CSS

.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>

P粉300541798

Antworte allen(1)

P粉5643017822024-03-30 09:39:37 1 Etage

我認(rèn)為您已經(jīng)解決了自己的大部分問題，除了因為一切都是白色的，所以很難看到行之間有空間。在行上添加了輕微的框陰影。我不確定你在這里如何使用引導(dǎo)程序，但我認(rèn)為如果你想覆蓋引導(dǎo)程序樣式，它是類似的

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;
}