CODEWITHSUNDEEP
htmlcsscss-tables
Maxim Webb
Maxim Webb

Reputation: 77

Issue with CSS and table borders

I am trying to make a grid with a blue background that has 10x10 tiles. All the tiles need to be square, and they need to be filled with blue, with a small black line seperating each tile. When I am formatting the table in CSS, it has edges that are too wide, which is an a minor, yet fairly irratating issue. I cannot see what the issue is, can anyone else?

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>

Upvotes: 2

Views: 90

Answers (1)

dippas
dippas

Reputation: 60563

You just need to add table-layout:fixed to your 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.

Note: avoid inline styles.

    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 -->

Upvotes: 3

Related Questions