是否可以将 display flex 的 td 设置为全高，或者使用不同的 CSS 来达到相同的效果？

Question

我继承了一个项目，有人决定将 td 的 display 设置为 flex。这样做的后果之一是，当行中有其他 td 跨多行时， td 和 display: flex 不会拉伸到其他 [=14] 的高度=]s.

解决此问题的正确方法（我认为）是从 td 中删除 display: flex 并将其放在内部 div 上，但我目前只有权限修改 CSS，所以我想知道是否有任何方法可以仅使用 CSS 修复它（同时保留 td 中的布局，如编造的代码片段所示下面）？

编辑：所需的布局是在 td 内有左侧和右侧，右侧是 span，它是一个彩色点。当 td 非常窄且左侧最终环绕时，即使在移动设备上，彩色点也需要始终位于右侧和顶部对齐。

table td {
  border: 1px solid black;
}

td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td class="flex"><span>Left </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>Left side longer </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td>
        <div class="flex"><span>The right way to do it </span><span class="right green">&nbsp;</span></div>
      </td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
</table>

Answer 1

我不知道真正的代码包含什么而不是 red/green 点，但如果它是图像或类似的东西，你可以简单地在上面使用 float: right 并删除 display: flex 来自 td:

table td {
  border: 1px solid black;
}

td.flex {
  /* removed */
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
  float: right;
}

span.green {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td class="flex"><span>Left </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>Left side longer </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td>
        <div class="flex"><span>The right way to do it </span><span class="right green">&nbsp;</span></div>
      </td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
</table>

Answer 2

so I'm wondering if there is any way to fix it with CSS only

是的，使用类似这样的东西来获得 original/intended 行为：

td {
  display: table-cell !important;
}

If I remove the display: flex I lose the right alignment of the colored dot

再添加一个 CSS 规则使其右对齐，例如，使用 float: right

span.right {
  float: right;
}

table td {
  border: 1px solid black;
}
td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  float: right;
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}
span.red {
  background-color: red;
}
span.green {
  background-color: green;
}

td {
  display: table-cell !important;
}

<table><tbody><td class="flex"><span>Left </span><span class="right red">&nbsp;</span></td><td>td with<br>multiple rows<br>blah blah blah</td></tr>
<tr><td class="flex"><span>Left side longer </span><span class="right red">&nbsp;</span></td><td>td with<br>multiple rows<br>blah blah blah</td></tr>
<tr><td><div class="flex"><span>The right way to do it </span><span class="right green">&nbsp;</span></div></td><td>td with<br>multiple rows<br>blah blah blah</td></tr>
</table>

Answer 3

设置宽度，使右侧 <span> 占据 2.3rem (width: 1.15rem; margin-left: 1.15rem)，左侧 <span> 占据剩余的 <td> 宽度。请注意 em 被 rem 替换，因为它们不受级联样式和继承的影响：

span:first-of-type {
  width: calc(100% - 2.3rem);
}

在示例中，所有 <td> 和 <span> 都是相同的，以演示左侧 <span> 中不同长度文本的样式表现。在移动尺寸中对其进行了测试，它始终垂直居中，并且点始终位于最右侧，从不移动。由于将 em 更改为 rem 并添加了 height: 1.15rem;，因此形状始终为圆形。这比 flexbox.

好多了

:root {
  font: 2ch/1 'Segoe UI';
}

table td {
  border: 1px solid black;
}

span {
  display: inline-block;
  border: 0;
  vertical-align: middle;
}

span:first-of-type {
  width: calc(100% - 2.3rem);
}

span.right {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 1.15rem;
  border-radius: 50%;
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td class="flex"><span>Left </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>Left side longer </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>The right way to do it </span><span class="right green">&nbsp;</span>
      </td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
</table>

是否可以将 display flex 的 td 设置为全高，或者使用不同的 CSS 来达到相同的效果？

Is it possible to set a td with display flex to be full height, or have different CSS to achieve the same effect?

css

css-tables

flexbox