表格包裹在 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

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