Javascript 动态Java脚本表边框大小调整不正确_Javascript_Html_Css_Border

Javascript 动态Java脚本表边框大小调整不正确

javascript html css

Javascript 动态Java脚本表边框大小调整不正确,javascript,html,css,border,Javascript,Html,Css,Border,您可以在此处看到该网站：（不确定为什么卡片间隔开..希望它们靠近）我试图创建一个简单的网站，创建一个存储卡游戏的图像表。图像加载正确，Java脚本似乎工作正常，但我似乎无法使边框随表的大小动态调整大小。无论我做什么，边框宽度都会在整个屏幕上扩展，而组成表格的图像远小于边框所包含的区域。（讽刺的是，高度似乎可以正确地动态变化，但宽度却没有变化。）提前多谢这是HTML <html> <head> <meta charset="UTF-8"> <

您可以在此处看到该网站：（不确定为什么卡片间隔开..希望它们靠近）

我试图创建一个简单的网站，创建一个存储卡游戏的图像表。图像加载正确，Java脚本似乎工作正常，但我似乎无法使边框随表的大小动态调整大小。无论我做什么，边框宽度都会在整个屏幕上扩展，而组成表格的图像远小于边框所包含的区域。（讽刺的是，高度似乎可以正确地动态变化，但宽度却没有变化。）提前多谢

这是HTML

<html>
<head>
<meta charset="UTF-8">

    <link href="mystyles.css" rel="stylesheet" type="text/css">
    <script src = "tableGen.js"></script> 
</head>
<body onload = "startTable('easy')">

        <div id="masthead">
            <img src="Images/GreyKnight.jpg" width = "450" height="200" alt="40k Table Top">
            <img src="Images/WarhammerLogo.png" width = "450" height="200" alt="Warhammer40K Logo">
            <img src="Images/SpaceMarine.jpg" width = "450" height="200" alt="Space Marine">
            <h1>
                Warhammer 40K Memory Card Game 
            </h1>
        </div>
        <br>

    <div id = "tableDiv">
            This text should be removed by the javascript. 
    </div>


    <form name = "input" >
    <input type="radio" name="difficulty" value="easy" checked = "checked" onClick ="startTable('easy')">Easy<br>
    <input type="radio" name="difficulty" value="medium" onClick ="startTable('medium')">Medium<br>
    <input type="radio" name="difficulty" value="hard" onClick ="startTable('hard')">Hard<br>   
    </form>

    </body> 


    </html>

here is the Java Script 

    function startTable(setting) {
    "use strict";

    var tableDiv = document.getElementById("tableDiv"); 
    var checkSetting = setting; 
    var newVar; 
    tableDiv.innerHTML = genTable(setting); 
    }

    function genTable(setting)
    {
"use strict"; 
var html = ""; 
var i = 0; 

if(setting == "easy")
    i = 4; 
else if(setting == "medium")
    i = 6; 
else if(setting == "hard") 
    i = 8; 

html += "<table> "; 
for (var col = i; col > 0; col--)
{
html += "<tr>"; 
for (var row = i; row > 0; row--)
{
 html += "<td><img src=\"Images/Cards/Card_Back.jpg\" width = \"80\" height=\"121\" alt=\"Card       Back\"></td>"
}
}
html += "</table>";

return html;

首先，javascript代码应该位于标记之间。

如果仍然不起作用，请尝试使用Jquery库，这将更容易工作

您可以像下面这样更新CSS，它将以相等的间距对齐卡

table tr td {
    padding: 5px;
    text-align: center;
}

这个游戏实际上有三个版本，简单、中等和困难。因此，您可以根据通过java脚本选择的游戏类型动态更改表宽

例如：对于简易模式，您可以将#tableDiv width更新为960px，并随着桌子的增长，为不同的游戏模式更新类似的不同宽度

#tableDiv {
    border: 3px solid #ccc;
    height: auto;
    margin: auto;
    padding: 2px 0 0;
    width: 960px;
}

更新你的CSS

#tableDiv {
    width: auto;
    height: auto;
    margin: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc;
    float: left;
}
table {
    /* width: 100%; */
    border-collapse: collapse;
    table-layout: fixed;
}

您是指动态生成的图像的边界吗？您想删除这些图像边框吗？@DotnetLearners我指的是环绕桌子本身的白色边框。图像本身周围的边框很好，但表格边框是我遇到边框大小问题的地方。

#tableDiv {
    width: auto;
    height: auto;
    margin: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc;
    float: left;
}
table {
    /* width: 100%; */
    border-collapse: collapse;
    table-layout: fixed;
}