Javascript 为什么赢了'；我的手机宽度不能固定在这张桌子上吗？

对HTML、CSS和Javascript非常陌生。将三个文件放入一个HTML文件中，代码如下

我正在为跳棋游戏创建一个简单的网格。如果用相同样式的HTML硬编码，这是可行的，但是当使用Javascript生成HTML时，宽度会随着窗口不断调整。我试图将每个单元格设置为60x60像素，但当窗口的大小小于整体网格大小时，仅强制执行高度

我错过了什么？我为下潜输入了一个宽度，该宽度保持网格等于单元格数*60。如果窗口大小大于此值，则看起来是正确的，但如果水平调整大小小于此值，则会折叠单元格

代码：

棋盘格
表{表布局：固定；
空单元格：显示；
背景色：#336666；
}
分区球员{位置：绝对位置；
排名前100名；
左：150px；
保证金：0；
填充：0；
边界：无；
}
表#PlayerGrid{背景色：336666；
颜色：红色；
}
td{}
td.squareOne{背景色：黄色；
高度：60px；
宽度：60px；
}
td.squareTwo{背景色：灰色；
}
正文{背景色：黑色；
字体系列：Arial、Times、serif；
字号：12号；
}
a{目标：新战线；
}
//基于客户输入生成游戏网格
函数addTable（行，列）{
var grid=document.getElementById（“主”）；
//创建HTML表
变量表大小=列*60；
var html=“”；
html+=“”；
html+=“”；
//将单元格添加到表中
对于（var i=1；i0）
{
html+=“”；
html+=“”；
}否则
//奇偶
如果（i%2>0&&j%2==0）
{
html+=“”；
html+=“”；
} 
//奇数
其他的
{
html+=“”；
html+=“”；
}           
}//结束列
html+=“”；
}//结束行
html+=“”；
html+=“”；//终场球员分组
grid.innerHTML=html；
}
将此文本替换为游戏网格。

将工作台宽度设置为480px：

table   { table-layout: fixed;
          empty-cells: show;
          background-color: #336666;
          width: 480px;
        }

---

为表格单元格指定最小宽度属性，如下所示

td.squareOne { background-color: yellow;
          height: 60px;
          min-width: 60px;          
     }

---

显然，它应该起作用。我在哪里可以看到这个问题？你能给出网站的url吗？这很有效，谢谢。找不到导致它无法工作的任何原因，但通过此调整复制了以前的版本，并且这次它工作正常。谢谢

td.squareOne { background-color: yellow;
          height: 60px;
          min-width: 60px;          
     }

//your test this code

 table {
   background-color: #336666;
   empty-cells: show;
   margin: 0 auto;
   position: relative;
   table-layout: fixed;
  }
  div#Player {
   border: 10px solid #808080;
   margin: 0 auto;
    text-align: center;
   vertical-align: middle;
   }
  table#PlayerGrid {
    color: #FF0000;
  }
  td.squareOne {
       background-color: #FFFF00;
       max-width: 100%;
       width: auto;
       padding:30px;
   }
  td.squareTwo {
    background-color: #808080;
  }
  body {
    font-family: Arial,Times,serif;
     font-size: 12pt;
   }
   @media  screen and (min-width: 321px) and (max-width:480px){
   td.squareOne,
    td.squareTwo{
    padding:20px;
  }
 }
  @media screen and (min-width:600px) and (max-width:800px){
  td.squareOne,
  td.squareTwo{
    padding:25px;
 }
   } 
    @media screen and (min-width: 720px) and (max-width:1024px){
    td.squareOne,
    td.squareTwo{
    padding:40px;
 }
  }