CODEWITHSUNDEEP
javascripthtmlcssmaterialize
Theo
Theo

Reputation: 3

Square cells in a Materialize table

I have a game map that has to be shown as a table on my webpage. For a better design, I decided to use Materialize because I like the row system. This map is made by a JavaScript code that returns the cells with a special class ("empty" or "wall") and I use the background-color property in CSS to show the map.

The problem is that the table takes all the column width and so the cells are not in a square shape. I tried the max-width property in CSS but it is not working very well...

Here is the HTML part :

    <div class="row">
        <div class="col s12">
            <div class="map">
                <p>Map :</p>
                <span id="arene"></span>
            </div>
        </div>
    </div>

And a part of how the table is made in JavaScript (datamap is a string of characters) :

switch (datamap[index]) {
    case 0:
        chainTab+="<td class=empty>";
        break;

    case 2:
        chainTab+="<td class=wall>";
        break;

The actual result is a table that is the size of the 12 rows and so cells are not in a specific shape but I would like to have only square cells. Thanks a lot for your help :)

Upvotes: 0

Views: 824

Answers (1)

JasonB
JasonB

Reputation: 6368

I was able to get square cells with a few tricks after including Materialize in this snippet.

  • Set the font size to 0 so line-height or white spaces don't become an issue.
  • Remove the border that Materialize adds to the tr elements.
  • Max width works fine to limit the size of the table.
  • I switched the td display property to inline-block.
  • The table cells were set to a calculated width - 100% / 12 here
  • To get a square, you can set the height of the cells to 0, and then add padding as a percentage. The percentage is a percentage of the width of the parent element, so 100% would have been my guess for squares but tables are a bit odd, so I ended up with calculating 100% / 12 here as well.

let table = "<table>";

for (let row = 0; row < 12; row++) {
  table += "<tr>";
  for (let col = 0; col < 12; col++) {
    table += "<td></td>";
  }
  table += "</tr>"
}
table += "</table>";

$('#table-wrapper').html(table);
.map table {
  max-width: 400px;
  border-spacing: 0;
  border-collapse: collapse;
}

.map table tr {
  font-size: 0;
  border: none;
}

.map table td {
  display: inline-block;
  padding: 0;
  width: calc( 100% / 12);
  height: 0;
  padding-bottom: calc( 100% / 12);
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-radius: 0;
  background: red;
}

.map table td:first-child {
  border-left: 1px solid black;
}

.map table tr:first-child td {
  border-top: 1px solid black;
}

border-top: 1px solid black;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s12">
    <div class="map">
      <p>Map :</p>
      <div id="table-wrapper"></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions