CSS 和 table 边框问题

Question

我正在尝试制作一个具有 10x10 方块的蓝色背景网格。所有的方块都需要是正方形的，并且需要用蓝色填充，并用一条黑色的小线分隔每个方块。当我在 CSS 中格式化 table 时，它的边缘太宽，这是一个小问题，但相当恼人。我看不出问题是什么，其他人可以吗？

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

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 + ">&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 和 table 边框问题

Issue with CSS and table borders

html

css

css-tables