包裹在div容器内的表格

Question

我想包装一个具有指定长度和宽度的div容器内的表格。

目前我在包装表格时遇到了麻烦。

注意我使用materialize.css其CSS框架

我设置的容器（class.board）与黑色边框使视觉上我可以解释它更好

这里是它看起来像现在：

我使用反应生成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; 

} 

理想的情况下我的应用程序，我想改变n×n个表在同一时间，在div容器下包裹的和。

我在这玩过几个小时，但还没有拿出解决方案。

Answer 1

尝试在012ss类的css中添加display: table;。