在div中压缩的固定大小的html表格单元格

Question

css文件如下:

   #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;
    }

您可以引用以下链接: https://jsfiddle.net/xuvtge5n/

我将表格单元格设置为固定大小 30px * 30px

但是，当表格的维度增加到很大时，比如60*60，单元格会被压缩在一起，变成一个矩形。显示的长度应为 30px，但宽度不是。

我将 overflow 属性设置为 scroll 或 auto 但它没有帮助。

我希望表格可以在 div 中垂直和水平滚动，并像正方形一样显示表格单元格而不压缩在一起。

如有遗漏请告知

Answer 1

设置表格宽度 100% 和 layout as fixed

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

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