Table 数据的最大高度不起作用（div 内部 table 数据导致此问题？？）

Question

在蛇梯游戏中，我使用 tables 进行排行。为了制作单独的蛇和梯子，我使用旋转的 div 元素来描绘线条。例如，我想从包含“4”的 table 部分到包含“16”的 table 部分放置一行。问题是，如果该行超过一定高度，它就会开始影响 table 行的高度。

我曾尝试将 max-height 设置为固定值，但它不起作用。下面是显示底行的最大高度超过 70px.

的代码片段

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

.row td {
  height: 70px;
  max-height: 70px;
  width: 70px;
  max-width: 70px;
  text-align: center;
  border: 3px solid black;
  font-size: 18px;
}

.row:nth-child(even) td:nth-child(even) {
  background-color: #dddddd;
}

.row:nth-child(odd) td:nth-child(odd) {
  background-color: #dddddd;
}

.line {
  background: lightgreen;
  height: 221.35px;
  width: 10px;
  transform: rotate(71.5deg) translate(0px, 0px);
}

.line span {
  position: absolute;
  transform: rotate(-71.5deg) translate(-65px, 26px);
}

<table>
  <tr class="row">
    <td>20</td>
    <td>19</td>
    <td>18</td>
    <td>17</td>
    <td>16</td>
    <td>15</td>
    <td>14</td>
    <td>13</td>
    <td>12</td>
    <td>11</td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>
      <div class="line"><span>4</span></div>
    </td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Answer 1

问题是 line 比父元素的 max-height 多 height，因此允许父元素扩展。有多种方法可以解决此问题，但这实际上取决于您想要什么。

一个解决方案是将 line 设置为 fixed position，负值 margin-top 等于 height 的一半该行：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

.row td {
  height: 70px;
  max-height: 70px;
  width: 70px;
  max-width: 70px;
  text-align: center;
  border: 3px solid black;
  font-size: 18px;
}

.row:nth-child(even) td:nth-child(even) {
  background-color: #dddddd;
}

.row:nth-child(odd) td:nth-child(odd) {
  background-color: #dddddd;
}

.line {
  background: lightgreen;
  height: 221.35px;
  width: 10px;
  transform: rotate(71.5deg) translate(0px, 0px);
  position: fixed;
  margin-top: -110.675px;
}

.line span {
  position: absolute;
  transform: rotate(-71.5deg) translate(-65px, 26px);
}

<table>
  <tr class="row">
    <td>20</td>
    <td>19</td>
    <td>18</td>
    <td>17</td>
    <td>16</td>
    <td>15</td>
    <td>14</td>
    <td>13</td>
    <td>12</td>
    <td>11</td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="line-container">
      <div class="line"><span>4</span></div>
    </td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

请注意，甚至可以通过设置 CSS variable for the line height and making use of calc() 以编程方式将 margin-top 设置为行高的一半，例如 height: --line-height 和 margin-top: calc(var(--line-height) / -2)：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

.row td {
  height: 70px;
  max-height: 70px;
  width: 70px;
  max-width: 70px;
  text-align: center;
  border: 3px solid black;
  font-size: 18px;
}

.row:nth-child(even) td:nth-child(even) {
  background-color: #dddddd;
}

.row:nth-child(odd) td:nth-child(odd) {
  background-color: #dddddd;
}

.line {
  background: lightgreen;
  --line-height: 221.35px;
  height: var(--line-height);
  width: 10px;
  transform: rotate(71.5deg) translate(0px, 0px);
  position: fixed;
  margin-top: calc(var(--line-height) / -2);
}

.line span {
  position: absolute;
  transform: rotate(-71.5deg) translate(-65px, 26px);
}

<table>
  <tr class="row">
    <td>20</td>
    <td>19</td>
    <td>18</td>
    <td>17</td>
    <td>16</td>
    <td>15</td>
    <td>14</td>
    <td>13</td>
    <td>12</td>
    <td>11</td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="line-container">
      <div class="line"><span>4</span></div>
    </td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Table 数据的最大高度不起作用（div 内部 table 数据导致此问题？？）

Max-Height of Table Data Not Working (div inside table data is causing this??)

html

css

position

css-position