如何在2個水平表之間創建一個大的“空白”空間-有解無憂

我為我的 Power Apps 專案創建了一個表，我需要一個基礎，以便稍后添加條目。

我想創建一個帶有條目的類似 excel 的表。我正在使用作業中的模板，就像第一張圖片一樣如何在 2 個水平表之間創建一個大的“空白”空間

在朋友的幫助下，我得到了一個可靠的 html 代碼，如下所示：如何在 2 個水平表之間創建一個大的“空白”空間

比較圖片時，您可以看到每個表格之間有一個空格。我怎樣才能存檔呢？

這是我的代碼

<!DOCTYPE html>    <!--Information für den Browser um welches Dokument es sich handelt-->
<html lang="de">    <!--//zuordnung der Sprache-->

<head>
   <meta charset="utf-8">    <!--?, ü, ? m?glich-->
   <title>überschrift</title>    <!--Tab-überschrift-->
    <meta name="viewport" content="width=device-width, initial-scale=1">    <!--responsive-->

<style type="text/css">   
* {
    font-family: Arial, Helvetica, sans-serif;
}

table, tr, td {
    border: 1px solid #054F9D;
    border-collapse: collapse;
}

td {
    padding: 0.5rem;
    max-width: 12rem;
    min-width: 12rem;
    word-wrap: break-word;
}

.grey {
    background-color: lightgrey;
    min-width: 5rem;
    max-width: 5rem;
}

p {
    font-weight: bold;
    padding-top: 2rem;
}

@media print {
    .pagebreak {page-break-before: always;} /*Seitenumbruch*/
}

</style>

</head>
<body>
<h1>überschrift</h1>

<!--Kundendaten-->
<div><p>Bereich</p>
<table>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
</table>
</div>

<!--Fahrzeugdaten-->
<div><p>Bereich2</p>
<table>
<tr>
    <td class="grey">Inhalt</td>
    <td>fevjvjjvjvjdfvjfvjfvjfjvjfdvjfdjvjfdjvfd</td>
    <td class="grey">Inhalt</td>
    <td>vfdjvjvjfjvfjvjvjfdvjfdjvfjdvjfdvjfdjvdj</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>
</table>
</div>
</body>
</html>

我嘗試了一個帶顯示的新 html；行內塊。然而，它只創造了一個小空間，我希望它們更大一點。不知道如何實作這一點

uj5u.com熱心網友回復：

我會將表格拆分為單獨的表格，然后添加空間，例如使用 flexbox：

* {
  font-family: Arial, Helvetica, sans-serif;
}

table,
tr,
td {
  border: 1px solid #054F9D;
  border-collapse: collapse;
}

td {
  padding: 0.5rem;
  max-width: 12rem;
  min-width: 12rem;
  word-wrap: break-word;
}

.grey {
  background-color: lightgrey;
  min-width: 5rem;
  max-width: 5rem;
}

p {
  font-weight: bold;
  padding-top: 2rem;
}

@media print {
  .pagebreak {
    page-break-before: always;
  }
  /*Seitenumbruch*/
}

div {
  display: flex;
  gap: 100px;
}

<div>
  <table>
    <tr>
      <td class="grey">Inhalt</td>
      <td>vfdjvjvjfjvfjvjvjfdvjfdjvfjdvjfdvjfdjvdj</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
  </table>
  <table>
    <tr>
      <td class="grey">Inhalt</td>
      <td>vfdjvjvjfjvfjvjvjfdvjfdjvfjdvjfdvjfdjvdj</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
    <tr>
      <td class="grey">Inhalt</td>
      <td>...</td>
    </tr>
  </table>
</div>

uj5u.com熱心網友回復：

您可以像這樣在表格中添加分隔符單元格：

.separator {
  border: none;
  border-top-style : hidden;
  border-bottom-style : hidden;
}

<tr>
    <td class="grey">Inhalt</td>
    <td>...</td>
    <td class="separator"></td>
    <td class="grey">Inhalt</td>
    <td>...</td>
</tr>

這是結果：如何在 2 個水平表之間創建一個大的“空白”空間

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530753.html

標籤：htmlcss

上一篇：設定背景影像不顯示在子div上

下一篇：用flexbox和css創建一個圓