表包裹在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; 在.board類的CSS中。