動態Java腳本表格邊框不施膠正確

您可以在這裏看到的網站：Memory Game （不知道爲什麼卡都間隔了..希望他們併攏）動態Java腳本表格邊框不施膠正確

我試圖創建一個簡單的網站爲存儲卡遊戲創建一張圖像表。圖像加載正確，並且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;

這裏是CSS

body { 
margin: 5px; 
background-color: black; 
color: white; 
font-family: Comic Sans MS, cursive, sans-serif; 
text-align: left; 

} 

h1 { text-align: center; 
font-family:Georgia, serif; 
color: red; 
} 

h2 { text-align: left; 
font-size: 22px; 
color: red; 
font-family:Verdana, Geneva, sans-serif; 

} 


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

table tr td { 
    padding: 5px; 
} 

table tr td img { 
    max-width: 100%; 
} 
img { 
outline: 4px solid #eee; 
} 

a:link { 
    color: #22F01B; 
} 

a:visited { 
    color: yellow; 
} 


#masthead { 
    text-align:center; 
    padding-top: 10px; 
    border-bottom-style:dashed; 
    border-bottom-width:medium; 
    border-bottom-color:#000080; 
} 


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

來源

2014-09-03 user3765881

你的意思是你動態生成圖像的邊界？你想刪除這些圖像邊界嗎？ – 2014-09-03 05:41:48

@DotnetLearners我指的是圍繞桌子本身的白色邊框。圖片周圍的邊框很好，但表格邊框是我遇到邊框尺寸問題的地方。 – user3765881 2014-09-03 12:16:04

您可以像下面那樣更新CSS，它會使卡片以相等的間距對齊。

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

實際上有三個版本的遊戲容易，中等和困難。因此，您可以根據通過java腳本選擇的遊戲類型動態更改表格寬度。

例如：對於簡單模式，您可以將#tableDiv寬度更新爲960像素，對於不同的遊戲模式，同樣不同的寬度隨着表的增長而更新。

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

來源

2014-09-03 05:00:07 Shamanth

首先所有的JavaScript代碼應該標記之間是英寸如果它仍然無法正常工作，請嘗試使用jquery庫，它會讓這項工作更容易

來源

2014-09-03 04:35:12

更新你的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; 
}

來源

2014-09-03 12:59:22

動態Java腳本表格邊框不施膠正確

回答

相關問題