您可以在此处查看站点:Memory Game (不知道为什么卡片被隔开..希望它们靠得很近)
我正在尝试创建一个简单的网站，为存储卡游戏创建一个图像表。图像加载正确，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;
}
最佳答案
您可以像下面这样更新 CSS，它将以相等的间距对齐卡片。
table tr td {
padding: 5px;
text-align: center;
}
游戏实际上分为简单、中等和困难三个版本。 因此，您可以根据通过 java 脚本选择的游戏类型动态更改表格宽度。
例如:对于简单模式，您可以将#tableDiv 宽度更新为 960px，并且随着表格的增长，不同游戏模式的宽度也同样不同。
#tableDiv {
border: 3px solid #ccc;
height: auto;
margin: auto;
padding: 2px 0 0;
width: 960px;
}
关于javascript - 动态 Javascript 表格边框未正确调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25636054/