Сделайте таблицу HTML, чтобы элементы были квадратными в зависимости от размера экрана, используя CSS?

Question

В настоящее время я делаю электронное приложение, для которого требуется квадратная сетка элементов (судоку). Я нашел в Интернете решения для создания квадратных элементов, но это основано на ширине. И часто ширина будет почти вдвое больше высоты, поэтому, исходя из этого, элементы сетки будут go за пределами экрана, а мне это не нравится. Я пробовал использовать

td{
height:11.11%;
padding-left:11.11%;
}

, но он вообще не создает квадрат, на самом деле высота становится stati c при минимальной высоте, если я это сделаю. Мой вопрос в том, как создать таблицу, в которой будут отображаться квадратные элементы в зависимости от высоты, используя CSS?

Answer 1

Таблица может не подходить для решетки судоку. У таблиц есть некоторые ограничения, особенно в отношении размеров. Его проще построить с помощью div и простой вложенной сетки css.

Вот пример для грубой идеи: https://jsfiddle.net/Treverix/docy76gw/5/

Внешний вид CSS вот так:

.sudoku {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 0;
  background-color: #2196F3;
  padding: 5px;
  width: 384px;
}

.sudoku-square {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  width: 126px;
  height: 126px;

  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: 0 0;
}

.sudoku-cell {
  border: 1px solid rgba(0, 0, 0, 0.5);
  width: 12px;
  height: 12px;
  text-align: center;
}

Answer 2

Вы можете использовать vh (высота области просмотра). 1vh составляет 1% от высоты области просмотра.

Изменить: добавить пример кода.

td {
  height: 33vh;
  width: 33vh;
}

Answer 3

td - объект ячейки таблицы, ширина изменится из-за ширины таблицы.

поэтому я редактирую его, теперь он квадратный. см. ниже

*{
      padding: 0;
      margin: 0;
    }
    table{
      width: 100%;
      border-collapse: collapse; 
    }
    td {
      display: inline-block;
      width: 20%;
      padding-bottom: 20%;
      /*
      width: calc(20% - 2px);
      padding-bottom: calc(20% - 2px);
      background-color: #ff0000; 
      border: 1px solid #000; 
      */
    }
    tr:nth-child(odd) td:nth-child(even){
      background-color: #0ff;
    }
    tr:nth-child(odd) td:nth-child(odd){
      background-color: #ff0;
    }
    tr:nth-child(even) td:nth-child(odd){
      background-color: #0ff;
    }
    tr:nth-child(even) td:nth-child(even){
      background-color: #ff0;
    }

<table >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>