Таблица, упакованная внутри контейнера 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; 

} 

В идеале в моем приложении, я хочу, чтобы изменить пхп таблицы и в то же время, обернутой в контейнере DIV.

Я играл в течение нескольких часов на этом, но еще не придумал решение.

Answer 1

Попробуйте добавить display: table; в css по .board Класс.