如果我犯了任何错误,请原谅,这是我在堆栈溢出上的第一篇帖子!我目前正在从事一个项目,这是从零开始编写一个2048年的游戏。为此,我用HTML语言创建了一个表,但是当我通过JS在该表中注入值时,它会在将值插入到子单元格时更改行和列like so的大小,并且我希望无论单元格是否为空,表布局都是固定的。我猜在我的CSS文件中有一些错误,但我的生活中我找不到它是什么,而且我的CSS也很糟糕。我试着在这里寻找答案,比如将表格布局设置为fixed,但没有成功。以下是我在HTML中拥有的内容-
$(document).ready(function() {
TableInit();
});
function TableInit() {
$("#btn").click(function() {
$("td").empty().removeClass(); // reset table
var rand1 = Math.floor(Math.random() * 16) //first random cell
$("table").find("td").eq(rand1).text(2).addClass("twos"); // setting value and class "2" to first random cell
var i = Math.floor(Math.random() * 9); // random for displaying "4" 10% of the time
if (i == 0)
val = 4;
else
val = 2;
var rand2 = Math.floor(Math.random() * 16);
while (rand1 == rand2) // to avoid rand1 and rand2 going to the same cell
rand2 = Math.floor(Math.random() * 16);
if (val == 2)
$("table").find("td").eq(rand2).text(val).addClass("twos"); //setting value and class "2" to 2nd random cell
else
$("table").find("td").eq(rand2).text(val).addClass("fours"); //setting value and class "4" to 2nd random cell
});
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: antiquewhite;
font-size: larger;
}
h1 {
font-size: 40px;
}
table {
font-size: 40px;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 15px solid rgb(161, 110, 110);
background-color: LemonChiffon;
padding: 60px;
margin: 0px;
font-size: 40px;
}
.twos {
background-color: rgb(235, 185, 61);
font-size: 40px;
}
.fours {
background-color: rgb(136, 25, 25);
font-size: 40px;
}
.button {
background-color: rgb(231, 101, 14);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>2048</h1>
<input type="button" value="New game" id="btn" align="center" class="button" /><br>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
有谁知道怎么解决我的问题吗?谢谢!
发布于 2018-07-27 04:29:54
将height
和max-height
属性设置为相等,并将width
和max-width
属性设置为相等。
$(document).ready(function() {
TableInit();
});
function TableInit() {
$("#btn").click(function() {
$("td").empty().removeClass(); // reset table
var rand1 = Math.floor(Math.random() * 16) //first random cell
$("table").find("td").eq(rand1).text(2).addClass("twos"); // setting value and class "2" to first random cell
var i = Math.floor(Math.random() * 9); // random for displaying "4" 10% of the time
if (i == 0)
val = 4;
else
val = 2;
var rand2 = Math.floor(Math.random() * 16);
while (rand1 == rand2) // to avoid rand1 and rand2 going to the same cell
rand2 = Math.floor(Math.random() * 16);
if (val == 2)
$("table").find("td").eq(rand2).text(val).addClass("twos"); //setting value and class "2" to 2nd random cell
else
$("table").find("td").eq(rand2).text(val).addClass("fours"); //setting value and class "4" to 2nd random cell
});
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: antiquewhite;
font-size: larger;
}
h1 {
font-size: 40px;
}
table {
font-size: 40px;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 15px solid rgb(161, 110, 110);
background-color: LemonChiffon;
padding: 60px;
margin: 0px;
font-size: 40px;
height: 60px;
max-height: 60px;
width: 80px;
max-width: 80px;
}
.twos {
background-color: rgb(235, 185, 61);
font-size: 40px;
}
.fours {
background-color: rgb(136, 25, 25);
font-size: 40px;
}
.button {
background-color: rgb(231, 101, 14);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>2048</h1>
<input type="button" value="New game" id="btn" align="center" class="button" /><br>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
https://stackoverflow.com/questions/51546955
复制相似问题