表包裹在div容器内

Question

我试图将一个表包装在一个具有指定长度和宽度的div容器中。

目前我无法将桌子包裹在其中。

注意我正在使用materialize.css作为其CSS框架

我已经设置了带有黑色边框的容器（ class.board ），因此我可以更好地解释它

以下是目前的情况：

我正在使用React渲染html，请原谅我发送截图：

SCSS

nav{
  background: skyblue;
}

body{
  background: #e2e2e2;
}

table {
  width: 100%;
  table-layout: fixed;
  overflow: hidden;
  border-collapse:collapse;
}

td{
  width: 33.33%;
  position: relative;
  color: #101935;
  background: #F2FDFF;
  border: 4px solid #DBCBD8;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.4s ease-out;
}

td:hover{
  background: #564787;
}

.alive{
  background: #61baf2;
}

.btn{
  background: #93C0A4
}

.controller{
  margin-top: 10px;
  text-align: center;
}

.pause{
  background: #be3131;
}

.generation{
  background: #977fd0;
  cursor: default;
  pointer-events: none;
}

.board {
  border: solid 4px;
  height: 40px;

}

理想情况下，在我的应用中，我希望更改表格的nxn，同时包装在div容器下。

我已经玩了几个小时了，但还没有提出解决方案。

Answer 1

尝试在display: table;课程的css中添加.board。