我正在尝试制作一个具有 10x10 block 的蓝色背景的网格。所有图 block 都必须是正方形的，并且需要用蓝色填充，并用一条小黑线分隔每个图 block 。当我在 CSS 中格式化表格时，它的边缘太宽，这是一个小但相当令人恼火的问题。我看不出问题是什么，其他人能看出来吗？
var boatStatusClient = "";
var x_client = 0;
var y_client = 0;
var battlefield_client = "";
var source_client;
var boatGrid = {
placeBoat_client: function() {
source_client = event.target || event.srcElement;
source_client = source_client.id
source_client.id = document.getElementById(source_client.id);
document.getElementById(source_client).style.backgroundColor = "orange";
},
}
for (y_client = 1; y_client < 11; y_client++) {
battlefield_client += "<tr>";
for (x_client = 1; x_client < 11; x_client++) {
battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "> </td>";
}
battlefield_client += "</tr>";
}
$(document).ready(function() {
$("#tableGrid_client").html(battlefield_client); //loads table
for (y_client = 1; y_client < 11; y_client++) {
for (x_client = 1; x_client < 11; x_client++) {
boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client);
boatStatusClient.addEventListener("click", function() {
boatGrid.placeBoat_client()
});
}
}
});table {
border-collapse: collapse;
border: none;
}
.tile {
background-color: #34B0D9;
cursor: pointer;
}
.tile:hover {
background-color: #6fcdec;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideGames">
<table style="position:absolute; top: 20px; left: 20px; border:6px solid #ff5050; width: 500px; height: 500px;" id="tableGrid_client"></table>最佳答案
您只需添加 table-layout:fixed到您的 table
fixed
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.
注意:避免内联样式。
var boatStatusClient = "";
var x_client = 0;
var y_client = 0;
var battlefield_client = "";
for (y_client = 1; y_client < 11; y_client++) {
battlefield_client += "<tr>";
for (x_client = 1; x_client < 11; x_client++) {
battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "> </td>";
}
battlefield_client += "</tr>";
}
$(document).ready(function() {
$("#tableGrid_client").html(battlefield_client); //loads table
for (y_client = 1; y_client < 11; y_client++) {
for (x_client = 1; x_client < 11; x_client++) {
boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client);
boatStatusClient.addEventListener("click", function() {
boatGrid.placeBoat_client()
});
}
}
});body {
font-size: 118%;
font-family: calibri light;
background-color: #E8E8E8
}
table {
border-collapse: collapse;
border: none;
table-layout: fixed;
position: absolute;
top: 20px;
left: 20px;
border: 6px solid #ff5050;
width: 500px;
height: 500px;
}
.tile {
background-color: #34B0D9;
cursor: pointer;
}
.tile:hover {
background-color: #6fcdec;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!--START OF GAMES PART-->
<div class="hideGames">
<table style="" id="tableGrid_client"></table>
</div>
<!--END OF GAMES PART -->关于html - CSS 和表格边框的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40433390/