html - 表格数据的最大高度不起作用(表格数据内的 div 导致此问题？？)

Question

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

我试图将 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 的 height 比父元素的 max-height 大，因此允许父元素扩展。有多种方法可以解决此问题，但这实际上取决于您想要什么。

一种解决方案是将 line 设置为具有 fixed position 和负 margin-top 等于行的高度的一半:

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>

请注意，将 margin-top 设置为行高的一半甚至可以通过编程方式完成，方法是设置 CSS variable用于行高并使用 calc() , 像 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>