Блог

Главная - Вопросы по программированию - Сделать ячейки таблицы (не 3×3, 2×4!) Квадрат?

Сделать ячейки таблицы (не 3×3, 2×4!) Квадрат?

#html #css #html-table #responsive

#HTML #css #html-таблица #отзывчивый

Вопрос:

Я пытаюсь сделать некоторые ответные квадратные ячейки таблицы. Я знаю ответы на этот вопрос, но все они, похоже, предназначены для сетки 3×3, я не могу найти версии 2×4. Я также не хочу, чтобы его нужно было прокручивать, он должен помещаться в меню. Он всегда должен быть квадратным, если он не может соответствовать высоте, уменьшите его. Я бы хотел, чтобы он был центрирован по горизонтали и вертикали. Как бы я это сделал? Вот сайт, о котором идет речь. Сайт. Вы можете видеть, как сетка с правой стороны соответствует высоте и ширине, но не является квадратной. Как я могу это исправить?

 .menu{
  background: #222222;
  position: absolute;
  top: 50%;
  /*left: 50%;*/
}
.menu.right{
  width: 25%;
  height: 70%;
  /*transform: translate(-50%, -50%);*/
  top: 5%;
  right: 0;
  float: right;
  /*display: grid;
  grid-gap: 5px;
  */
  /*grid-template-columns: auto auto;*/
  /*grid-template-rows: auto auto auto auto;
  grid-template-columns: repeat(2, 50%);
  */
  /*grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  padding: 5px;*/
  display: flex;
  flex-direction: column;
}
#statwrap{
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  padding: 5px;
}
#stattab{
  width: 100%;
  height: 100%;
  flex: 1;
  border-spacing: 10px 10px;
}
#statbody{

}
.statcell{
  background: #333333;
  border-radius: 15px;
  width: 50%;
} 
 <div class="menu right">
  <!--
  <div class="stat one"></div>
  <div class="stat two"></div>
  <div class="stat three"></div>
  <div class="stat four"></div>
  <div class="stat five"></div>
  <div class="stat six"></div>
  <div class="stat seven"></div>
  <div class="stat eight"></div>
  -->
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
      </tbody>
    </table>
</div>
</div>

Спасибо.

Ответ №1:

 const adjustSquare = () => {
    let squareWidth = document.querySelector('.menu.right').offsetHeight / 4;
    document.getElementById('stattab').style.maxWidth = (squareWidth * 2)   'px';
}

document.onreadystatechange = () => {
    if (document.readyState == 'interactive') {
        adjustSquare()
    }
}

window.onresize = adjustSquare 
 .menu {
    background: #222222;
    position: absolute;
    top: 50%;
}
.menu.right {
    width: 25%;
    height: 70%;
    top: 5%;
    right: 0;
    float: right;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    justify-content: center;
}
#statwrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 5px;
    justify-content: center;
    align-items: center;
}
#stattab {
    width: 100%;
    height: 100%;
    flex: 1;
    border-spacing: 10px 10px;
}
.statcell {
    background: #333333;
    border-radius: 15px;
    width: 50%;
    position: relative;
}
.statcell .square {
    padding-top: 100%;
}
.statcell .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    color: #ffffff;
} 
 <div class="menu right">
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
        <tr>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
          <td class="statcell">
            <div class="square"></div>
            <div class="content"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Комментарии:

1. Вам нужно прокрутить вниз, есть ли способ, чтобы они тоже соответствовали высоте?

2. Если вы хотите, чтобы они соответствовали высоте, тогда они не будут соответствовать ширине. Один или другой. Вы установили ширину и высоту родительского элемента на значение%, которое отличается, если вы используете другой экран, если вы хотите использовать 100% ширины и высоты родительского элемента, тогда нет способа сделать их квадратными, если вы не установили родительскому элементу фиксированную высоту и ширину, чтобы онибудут ли, например width: 200px; height: 300px , эти квадраты размером 6 квадратов размером 100 на 100 пикселей (поля, пробелы и отступы исключены)

3. Я думаю, мне следовало упомянуть, что если они не могут соответствовать ширине, их следует центрировать и уменьшать. По сути, я предполагаю, что делает мой, за исключением того, что ширина должна быть такой же, как и высота.

4. Под этим я подразумевал, что они не будут занимать всю ширину, чтобы сохранить соотношение сторон.

5. Есть ли способ уменьшить их, чтобы они соответствовали высоте, но при этом оставались квадратами? Это то, что я пытаюсь сделать.

Ответ №2:

Внутри ячейки вы можете использовать плавающий псевдо с вертикальным заполнением 100% . он будет использовать ширину td в качестве ссылки и растянет ее, чтобы она была как минимум квадратной.

Ячейка таблицы в любом случае будет увеличиваться в соответствии с высотой содержимого, если она выходит за пределы вашего начального квадрата

 .menu.right {
  width: 25%;
  height: 70%; 
  max-width:40vmin;
  max-height:90vmin;
  min-width:0;
  float: right; 
  display: flex;
  flex-direction: column;
  border:solid;
}

#statwrap {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  padding: 5px;
}

#stattab {
  width: 100%;
  height: 100%;
  flex: 1;
  border-spacing: 10px 10px;
}

#statbody {}

.statcell {
  background: #333333;
  border-radius: 15px;
  width: 50%;
}

.statcell::before {
  content: '';
  float: left;
  padding-top: 100%;
} 
 <div class="menu right">
  <!--
  <div class="stat one"></div>
  <div class="stat two"></div>
  <div class="stat three"></div>
  <div class="stat four"></div>
  <div class="stat five"></div>
  <div class="stat six"></div>
  <div class="stat seven"></div>
  <div class="stat eight"></div>
  -->
  <div id="statwrap">
    <table id="stattab">
      <tbody id="statbody">
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
        <tr>
          <td class="statcell"></td>
          <td class="statcell"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Комментарии:

1. При этом используется прокрутка, я хочу, чтобы таблица была уменьшена, чтобы соответствовать высоте.

2. @FoxGAMING_NTF , хорошо, это не было указано в вопросе, в этом случае вы можете посмотреть значение vmin, чтобы установить максимальную высоту и максимальную ширину . Фрагмент обновлен, но, опять же, вы не указали реальный контекст, так что это может быть не то, что вам нужно 😉 … квадрат, по-видимому, округляется в этом маленьком фрагменте :)… может быть, еще один момент для уточнения. В любом случае, получайте удовольствие от кодирования.

3. Хорошо, извините, я обновил вопрос. Странно то, что здесь это работает, но не тогда, когда я добавляю его на свой сайт.

4. @FoxGAMING_NTF вы должны дополнить свой фрагмент достаточным количеством кода, чтобы воспроизвести вашу реальную ситуацию 😉

5. Да, я не хотел добавлять все. Я постараюсь заставить его делать то, что он делает здесь.