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

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，但宽度应为30px。

我将溢出属性设置为滚动或自动，但无济于事。

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

请告知是否有任何遗漏。

最佳答案

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

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

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

关于html - 固定大小的html表单元格，在div中压缩，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29327385/