Raised-bed with svelte

Question

I have been trying for several hours to create a Raised-bed for my final project in school, I made a table that is supposed to be the location of the plant, each cell contains a button that will later be used for setting, anyway I try to create sides for a Raised-bed and I failed.

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

Answer 1

Well in you case you don't need to use a table, using some divs with display: flex will be enought:

<script>
  export let x = 10;
  export let y = 4;
</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;
  }

  .row {
    display: flex;
  }

  .place {
    padding: 30px 30px;
    border-radius: 4px;
    margin: 5px;
  }

  button {
    background-color: #87431d;
    border: none;
  }
</style>

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

Have a look to the REPL.