如何将表格放入适应表格内容大小的背景图像

Question

我想在图像中包含一个包含 2 列和大约 10 行的表格。我希望这张图片的大小适应表格内容的大小并具有响应性。此图片包含在另一张图片中，并且必须以它为中心（覆盖大约 50% 的大小）。我的问题是，当我添加一些行或减小屏幕尺寸时，表格内容会脱离图像。 有没有一种简单的方法可以以响应方式将我的表格包含到我的图像中？

我尝试了一些 CSS，例如“背景大小：包含”、相对位置和绝对位置……但这不起作用

JSX

<div className="background-angel">
        <div className="detail-angel">
      <div className="name-angel">{angel.name}</div>
            <table>
        <tr>
          <td>Attaque</td>
          <td>{angel.attack}</td>
                </tr>
        <tr>
          <td>Parade</td>
          <td>{angel.parade}</td>
                </tr>
        <tr>
          <td>Attaque Magique</td>
          <td>{angel.mag_attack}</td>
                </tr>
        <tr>
          <td>Résistance Magique</td>
          <td>{angel.mag_res}</td>
                </tr>
        <tr>
          <td>Protection</td>
          <td>{angel.protection}</td>
                </tr>
        <tr>
          <td>PV</td>
          <td>{angel.hp}</td>
                </tr>
        <tr>
          <td>Nombre d'Attaques</td>
          <td>{angel.attack_number}</td>
                </tr>
        <tr>
          <td>Dégats</td>
          <td>{angel.damage}</td>
                </tr>
        <tr>
          <td>Armement</td>
          <td>{angel.weapon}</td>
                </tr>
        <tr>
          <td>Choeur</td>
          <td>{angel.chorus.name}</td>
                </tr>
        <tr>
          <td>Pouvoir</td>
          <td>{angel.attack}</td>
                </tr>
            </table>
        </div>
    </div>

CSS

.background-angel {
  width: 100vw; 
  height: 100vh; 
  background-image: url('../../../../images/background8.jpg');
  background-size: cover;
  background-position: center;
}


.detail-angel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.5);
  background-image: url('../../../../images/Detail2.png'); /* Chemin de l'image de détail */
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  width: 80%;
  height: 80%;
  max-height: 90%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #f0f;
}

th {
  background-color: white;
}