divコンテナ内に表がラップされています

Question

指定された長さと幅を持つdivコンテナ内に表をラップしようとしています。

現在、私は内部にテーブルをラップするのに問題があります。私は私が視覚的に、私はより良い

それを説明することができます。ここ何だ黒の境界線の入った容器（class.board）を設定してそのCSSフレームワーク

ためmaterialize.cssを使用しています

NOTE現在のように見える：私は使用しています

がHTMLをレンダリングするように反応するので、送信のための私を許して代わりにスクリーンショットをINGの：私のアプリで理想的

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コンテナの下に包ま同時に、でn×nのを変更したいです。

私はこれについて何時間も遊んだことがありますが、解決策はまだ出ていません。

Answer 1

.boardクラスのCSSにdisplay: table;を追加してみてください。