HTML5 Table 无法消除单元格之间的细边框

Question

我有一个很重的设计table，它使用两个旋转的 th 标签，其中并排放置了 div，看起来像一个单元格。当我查看背景颜色时，firefox 和 safari（不是 chrome）中出现了一条细线。

我试过的。

崩溃table.
cellspacing="0" 和 cellpadding="0"
为转换添加了 Safari 和 mozilla 前缀
...一堆其他的（请帮助）。

link 与 table https://jsfiddle.net/LTFoReal/tb51dc8x/2/

的 jsfiddle

<!-- Area where code is having trouble in jfiddle -->

<th class="pole name color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-16px;">Reflection</div>
        </th>
        <th class="pole modifier color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-64px">Benefits</div>
        </th>

这是 safari/firefox/pdf 预览中当前的样子（似乎将图像的尺寸调整得如此之大，抱歉）。

Answer 1

我觉得这不是一个答案，因为我无法让两个单元并排工作。然而，我能够通过将它们转换为 rowspan + colspan 为 4 的单个单元格然后在带有 2 p 标签的 div 内部并使用 flex box 使它们做事来解决这个问题。

table {
  margin-top: 40px;
}
  .pole {
    border: 1px solid var(--border-color);
    font-size: var(--font-s-normal);
  }

  .pole.name {
    width: 70px;
  }

  .pole-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: lightblue;
  }

  .pole.name .pole-container p {
     font-size: var(--font-s-normal);
    font-weight: var(--font-w-mid);
    padding: 0;
    margin: 0;
  }
  
  .rotate {
  transform: rotate(-90deg);
  }

<table>
  <tbody>
    <th class="pole name" rowspan="4" colspan="4">
        <div class="pole-container rotate">
           <p>Reflection</p>
           <p>Benefits</p>
        </div>
    </th>
   </tbody>
 </table>

HTML5 Table 无法消除单元格之间的细边框

HTML5 Table can't get rid of thin border between th cells

html

css

css-tables