制作表格单元格（不是 3x3、2x4！）正方形？

Posted 2023-03-06

【中文标题】制作表格单元格（不是 3x3、2x4！）正方形？

【英文标题】：Make Table Cells (Not 3x3, 2x4!) Square?

【发布时间】：2021-06-03 04:20:07

【问题描述】：

我正在尝试制作一些响应方表格单元格。我知道这个问题的答案，但它们似乎都适用于 3x3 网格，我找不到 2x4 版本。我也不希望它必须滚动，它需要适合菜单。它应该始终是方形的，如果它不适合高度，请按比例缩小。我希望它水平和垂直居中。我该怎么做呢？ 这是有问题的网站。 The Site。 您可以看到右侧的网格如何适合高度和宽度，但不是正方形。我该如何解决这个问题？

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

【讨论】：

你必须向下滚动，有没有办法让它们也适合高度？

如果您希望它们适合高度，那么它们将不适合宽度。一个或另一个。您已将父元素的宽度和高度设置为 % 值，如果您使用不同的屏幕，如果您想使用父元素的 100% 的宽度和高度，那么只要您不使用，就无法使它们成为正方形t 将父元素设置为固定的高度和宽度，因此它们将形成正方形，例如 width: 200px; height: 300px 这将适合 6 个 100 像素 x 100 像素的正方形（省略边距、间隙和填充）

我想我应该提到，如果它们不能适应宽度，它们应该居中，并按比例缩小。基本上，我猜，我在做什么，除了宽度应该和高度一样。

我的意思是他们不会占用全宽来保持纵横比。

有没有办法让它们按比例缩小以适应高度，但仍然是正方形？这就是我想要做的。

【参考方案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>

【讨论】：

这使用滚动，我希望它缩小表格以适应高度。

@FoxGAMING_NTF ，好的，问题中没有指定，在这种情况下，您可以查看 vmin 值来设置 max-height 和 max-width 。片段已更新，但是，再次，您没有指定真实的上下文，因此这可能不是您所需要的；）......在那个小 sn-p 视图中四舍五入：）......也许还有一点需要澄清.不管怎样，祝你编码愉快。

好的，抱歉，我更新了问题。奇怪的是它似乎在这里工作，但当我将它添加到我的网站时却不行。

@FoxGAMING_NTF 你应该用足够的代码来完成你的 sn-p 以重现你的真实情况;)

是的，我不想添加所有内容。我会试着让它做它在这里做的事情。