Question

HTML，CSS和Javascript的新手。将这三个文件放入一个HTML文件中，代码如下。

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

我在这里缺少什么？我输入了一个保持网格等于单元格数60的潜水宽度。如果窗口大小大于此值，它看起来是正确的，但如果水平调整得更小，它会折叠单元格。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Checkers Grid</title>
<style>
table   { table-layout: fixed;
          empty-cells: show;
          background-color: #336666;
        }

div#Player { position: absolute;
             top: 100;
             left: 150px;
             margin: 0;
             padding: 0;           
             border: none;
           }

table#PlayerGrid { background-color: 336666;
                   color: red;
                 }

td  {}

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

td.squareTwo { background-color: grey; 
             }

body    { background-color: black;
          font-family: Arial,Times,serif;
          font-size: 12pt;
        }

a   { target: new front;
    }
</style>
<script>
// Generate game grid based on customer input
function addTable(row, col){    
    var grid = document.getElementById("Main");
    // Create HTML table
    var table_size = col * 60;
    var html = "";
    html += "<div id=\"Player\" name=\"Player\" width = \"" + table_size + "\">";
    html += "<table id=\"PlayerGrid\">";
    // Add Cells to table
    for(var i=1; i<=col; ++i)
    {
        //Create a <tr>
        html += "<tr>";
        for(var j=1; j<=row; ++j)
        {
            // Create <td> in each row          
            //even-even
            if(i%2==0 && j&2===0)
            {
                html+= "<td class = \"squareOne\">";
                html+= "</td>";
            } else 
            //even-odd
            if(i%2==0 && j%2>0)
            {
                html+= "<td class = \"squareTwo\">";
                html+= "</td>";
            } else
            //odd-even
            if(i%2>0 && j%2===0)
            {
                html+= "<td class = \"squareTwo\" h>";
                html+= "</td>";
            } 
            //odd-odd
            else
            {
                html+= "<td class = \"squareOne\">";
                html+= "</td>";
            }           
        } //end columns
        html += "</tr>";
    } // end rows
    html += "</table>";
    html += "</div>"; // End Player div
    grid.innerHTML = html;
}
</script>
</head>

<body onload="addTable(8,8)">
<div id="Main">Replace this text with game grid.</div>

</body>

</html>

Answer 1

为表格单元格指定min-width属性，如下所示。

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

Answer 2

将表格宽度设置为480px：

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

Answer 3

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

为什么我的手机宽度不会固定在这张桌子上？

3 个答案: