Html 苗条床

我已经试了几个小时来为我在学校的最后一个项目创建一个凸起的床，我制作了一张桌子，应该是植物的位置，每个单元格都包含一个按钮，稍后将用于设置，无论如何，我尝试为凸起的床创建侧边，但我失败了

<script>
  export let x;
  export let y;
</script>

<style>
  .frame {
    background-color: #5a3921;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    -webkit-app-region: no-drag;
    transform: rotateX(40deg) rotateX(80deg) rotateZ(40deg) scaleZ(10);
    perspective: 20em;
  }
  .place {
    padding: 30px 30px;
    border-radius: 4px;
    margin: 5px;
  }
  button {
    background-color: #87431d;
    border: none;
  }
  #square {
    width: 1000px;
    height: 100px;
    background: red;
  }
</style>

<table class="frame">
  <tr>
    <table>
      {#each Array(x) as _, i}
        <tr>
          {#each Array(y) as _, j}<button class="place" />{/each}
        </tr>
      {/each}
    </table>
  </tr>
</table>

出口let x；
出口许可证；
.框架{
背景色：#5a3921；
左边距：自动；
右边距：自动；
利润率最高：10%；
-webkit应用程序区域：无拖动；
变换：rotateX（40度）rotateX（80度）rotateZ（40度）scaleZ（10度）；
透视：20em；
}
.地点{
填充：30px 30px；
边界半径：4px；
保证金：5px；
}
钮扣{
背景色：#87431d；
边界：无；
}
#方格{
宽度：1000px；
高度：100px；
背景：红色；
}
{#每个数组（x）作为{，i}
{#每个数组（y）作为{，j}{/each}
{/每个}

---

如果您不需要使用

表

，使用一些div和

display:flex将足够：


导出x=10；
导出let y=4；
.框架{
背景色：#5a3921；
左边距：自动；
右边距：自动；
利润率最高：10%；
-webkit应用程序区域：无拖动；
变换：rotateX（40度）rotateX（80度）rotateZ（40度）scaleZ（10度）；
透视：20em；
}
.行{
显示器：flex；
}
.地点{
填充：30px 30px；
边界半径：4px；
保证金：5px；
}
钮扣{
背景色：#87431d；
边界：无；
}
{#每个数组（y）作为{，i}
{#每个数组（x）作为{，j}{/each}
{/每个}

查看一下。
如果您不需要使用
表
，那么将一些div与
display:flex一起使用就足够了：


导出x=10；
导出let y=4；
.框架{
背景色：#5a3921；
左边距：自动；
右边距：自动；
利润率最高：10%；
-webkit应用程序区域：无拖动；
变换：rotateX（40度）rotateX（80度）rotateZ（40度）scaleZ（10度）；
透视：20em；
}
.行{
显示器：flex；
}
.地点{
填充：30px 30px；
边界半径：4px；
保证金：5px；
}
钮扣{
背景色：#87431d；
边界：无；
}
{#每个数组（y）作为{，i}
{#每个数组（x）作为{，j}{/each}
{/每个}

看一看。
在你的图像中清晰地显示
x=10
和
y=4
对吗？对，我正在建造一个农场机器人，所以x和y是升高的床的大小。相关的，如果不重复：我指的是下面的链接：在你的图像中清晰地显示
x=10
和
y=4
对吗，我正在建造一个农场机器人，所以x和y是凸起床的大小。如果不重复，则相关：我的意思是类似以下链接的内容：