Квадратные ячейки в таблице Materialise - PullRequest
Новая
       12

Квадратные ячейки в таблице Materialise

0 голосов
/ 21 мая 2019

У меня есть игровая карта, которая должна отображаться в виде таблицы на моей веб-странице. Для лучшего дизайна я решил использовать Materialise, потому что мне нравится система строк. Эта карта сделана с помощью кода JavaScript, который возвращает ячейки со специальным классом («пустой» или «стена»), и я использую свойство background-color в CSS, чтобы показать карту.

Проблема в том, что таблица занимает всю ширину столбца, поэтому ячейки не имеют квадратной формы. Я пробовал свойство max-width в CSS, но оно работает не очень хорошо ...

Вот часть HTML: 

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

И часть того, как таблица создана в JavaScript (карта данных представляет собой строку символов): 

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

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

Фактическим результатом является таблица размером 12 строк, поэтому ячейки не имеют определенной формы, но я хотел бы иметь только квадратные ячейки. Большое спасибо за вашу помощь:)

1 Ответ

1 голос
/ 21 мая 2019

Мне удалось получить квадратные ячейки с несколькими трюками после включения в этот фрагмент Materialise.

  • Установите размер шрифта равным 0, чтобы высота строки или пробелы не становились проблемой.
  • Удалите границу, которую Materialize добавляет к элементам tr.
  • Максимальная ширина отлично подходит для ограничения размера таблицы.
  • Я переключил свойство отображения td на встроенный блок.
  • Ячейки таблицы были установлены на расчетную ширину - здесь 100% / 12
  • Чтобы получить квадрат, вы можете установить высоту ячеек на 0, а затем добавить отступ в процентах. Процент представляет собой процент от ширины родительского элемента, поэтому 100% было бы моим предположением для квадратов, но таблицы немного странные, поэтому в итоге я также рассчитал 100% / 12 здесь. 

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