html table cell with fixed size compressed in div

Question

The css file is as follows:

   #table_container {
        border-collapse: collapse;
        border-spacing: 0;
        padding: 0;
        overflow: scroll;
        white-space: nowrap;
    }
    table, tr,td{
       border: 2px solid blue;
       border-collapse: collapse;
    } 

    td {
        height: 30px;
        width: 30px;
        text-align: center;
        background-color: white;
        color: black;
    }

You can refer to the following link: https://jsfiddle.net/xuvtge5n/

I set the table cell to a fixed size 30px * 30px

However, when the dimension of table increase to a large size, like 60*60, the cell will be compressed together and become a rectangle. The length displayed should be 30px but the width is not.

I set the overflow property to scroll or auto but it does not help.

I want the table can be scrolled inside the div vertically and horizontally and display the table cell like a square without compressing together.

Please tell if anything missing.

Answer 1

Set table width 100% and layout as fixed

table {
    table-layout: fixed;
    width: 100%;
}

https://jsfiddle.net/xuvtge5n/2/