HTML5 Стол не может избавиться от тонкой границы между клетками - PullRequest
Новая
       24

HTML5 Стол не может избавиться от тонкой границы между клетками

0 голосов
/ 01 апреля 2020

У меня красивая тяжелая таблица, в которой используются два повернутых тега, внутри которых расположены элементы div, чтобы они выглядели как одна ячейка. У меня проблема с тонкой линией в firefox и сафари (не chrome) при просмотре цветов фона.

Что я пробовал.

  • свернутая таблица.
  • cellspacing = "0" и cellpadding = "0"
  • добавлены префиксы safari и mozilla для преобразований
  • ... куча других фотографий (помогите пожалуйста ).

ссылка на jsfiddle с таблицей https://jsfiddle.net/LTFoReal/tb51dc8x/2/

<!-- 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 (кажется, ТАК большие размеры изображений, чтобы соответствовать, извините)

enter image description here

1 Ответ

0 голосов
/ 01 апреля 2020

Я не чувствую, что это ответ, потому что я не мог заставить две клетки работать бок о бок. Однако я смог это исправить, преобразовав их в одну ячейку с rowspan + colspan, равным 4, а затем сбросив div внутри с помощью тегов 2 p и используя 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>
...