html 为什么我的table边缘不成直角？

km0tfn4u 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(146)

我有一个大table，我打算做一个游戏。我需要所有的table部分都是正方形的，但是边缘更像是长方形的。我找不到任何东西来帮助解决这个问题。
我尝试将tr和th的最大宽度和高度设置为6.667vw（大约是屏幕宽度的1/15），但是边缘尺寸仍然太大，不可能是小的圆形误差。我已经擦除了tr和th的宽度和高度，看看它是否是那样的东西，但是那也不起作用。我有很多表格元素，一个15 x15，我给最小的数量可能为我给定的问题;我还添加了CSS。

CSS：

* {

  margin: 0;

  padding: 0;

}

table {

  width: 100%;

  height: 100vw;

  border: 3px solid red;

  border-collapse: collapse;

}

tr th {

  border: 2px solid black;

}

HTML：

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Scrabble</title>

    <link rel="stylesheet" href="style.css"

  </head>

  <body>

    <div class="game">

      <div class="board">

        <table>

          <tr class="row1">

            // 15 <tr> elements with

            // incrementing 'col#' classes

          </tr>

          <tr class="row2"> // class 'row#' incremented by 1

            // 15 <tr> elements

          </tr>

          // 13 more <tr> elements with

          // incrementing 'row#' classes

        </table>

      </div>

      <div class="letterSelect"></div>

    </div>

  </body>

</html>

很抱歉html没有元素，我想保持简洁，同时给你足够的细节来复制。类名没有功能，但我包括了它们，因为它们在我的代码中。我希望这是足够的。

Html

来源：https://stackoverflow.com/questions/74697041/why-is-my-tables-edges-not-square-when-they-should-be

1条答案

按热度按时间

zkure5ic1#

首先要注意的是，你不应该真的使用<table>来制作你的游戏板。<table>应该用来显示表格数据。More information about tables on MDN。
我建议使用display:grid来制作你的电路板。More information about grid layout on MDN。
我已经创建了a codepen to use as a starting point，代码如下所示。

HTML格式

<div class="game">
    <div class="board">
        <div class="square"></div>
        <!-- 224 more .square elements to make your 15 x 15 board -->
    </div>
</div>

CSS格式

.game {
    padding: 20px; // just to add some breathing space to the demo
    display: grid;
    place-content: center;
}

.board {
    display: grid;
    grid-template-columns: repeat(15, 5vmin); // substitute 5vmin for whatever size you like, just make sure to use the same value for grid-template-rows
    grid-template-rows: repeat(15, 5vmin);
    border: 1px solid black;
}

.square {
    border: 1px solid black;
}

赞(0）回复(0）举报 2022-12-09

我来回答

html 为什么我的table边缘不成直角？

CSS：

HTML：

1条答案

相关问题

热门标签

最新问答