Question

我正在尝试使用具有10x10平铺的蓝色背景制作网格。所有的瓷砖都需要是正方形的，并且需要用蓝色填充，每条瓷砖分隔一条小黑线。当我在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 + ">&nbsp</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>

Answer 1

您只需将table-layout:fixed添加到table

即可

<强>固定

表和列宽度由table和col元素的宽度或第一行单元格的宽度设置。细胞在   后续行不会影响列宽。

在“固定”布局方法下，可以在下载和分析第一个表行后呈现整个表。这个可以   通过“自动”布局方法加快渲染时间，但是   后续单元格内容可能不适合所提供的列宽。任何   具有溢出内容的单元格使用overflow属性   确定是否剪辑溢出内容。

注意：避免使用内联样式。

    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 + ">&nbsp</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 -->

CSS和表格边框问题

1 个答案: