包裹在div容器內的表格

我想包裝一個具有指定長度和寬度的div容器內的表格。包裹在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容器下包裹的和。

我在這玩過幾個小時，但還沒有拿出解決方案。

來源

2016-09-20 Alejandro

嘗試添加溢出：隱藏到板類 –

這樣做的技巧，我意識到materialize.css是在表格的單元格內添加填充。 – Alejandro

嘗試在012ss類的css中添加display: table;。

來源

2016-09-20 00:41:16 dperezac

包裹在div容器內的表格

回答

相關問題