Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице

Question

Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице

Рейтинг: 0Ответов: 1Опубликовано: 09.04.2023

Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице. При удалении transform: rotate(180deg); всё работает как надо. Как сделать так, чтобы ячейки R1 не перекрывали ячейку AAA, но и текст в них был в нужной мне ориентации (снизу вверх, как при удалении transform: rotate(180deg);)

table {
  margin: 5% 3% 5% 3%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  background: #666;
}

.sticky {
  position: sticky;
  top: 0;
  background: #fff;
}

<div>
  <table style="width=100%" border=1 cellpadding=0>
    <tbody>
      <thead class="sticky">
        <tr>
          <th class="vertical-text" width="1%" rowspan="3">AAA</th>
          <th colspan="3">col1</th>
        </tr>
        <tr>
          <th>col21</th>
          <th colspan="2">col22</th>
        </tr>
        <tr>
          <th>col31</th>
          <th>col32</th>
          <th>col33</th>
        </tr>
      </thead>
      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>



      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>


      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>


      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>


      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>



      <tr>
        <td class="vertical-text" rowspan="3">R1</td>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>

      <tr>
        <td>asd</td>
        <td>ds</td>
        <td>a</td>
      </tr>
    </tbody>
  </table>
</div>

html transform table

Источник: Stack Overflow на русском

Answer 1

▲ 0

Перенёс весь блок <header> в конец и всё заработало. Но не уверен что это единственно верный способ


<head>
  <style>

    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #000;
      text-align: center;
    }

#vertical_text1 {
      writing-mode: tb-rl;
      transform: rotateZ(180deg);
      background: #666;
    }
    .vertical_text {
      writing-mode: tb-rl;
      transform: rotateZ(180deg);
    }
    

    .sticky{
      position: sticky;
      top: 0;
      background: #fff;
    }
    
  </style>
</head>
<body>
  <div>
      <table style="width=100%" border=1 cellpadding=0 >
        <tbody>
        
              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>



              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>


              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>


              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>


              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>



              <tr><td id="vertical_text1" rowspan="3">R1</td>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>

              <tr>
              <td>asd</td>
              <td>ds</td>
              <td>a</td>
              </tr>  
              <thead class="sticky">
          <tr>
            <th class="vertical_text" width="1%" rowspan="3">AAA</th>
            <th colspan="3">col1</th>
          </tr> 
          <tr>
            <th>col21</th>
            <th colspan="2">col22</th>
          </tr>
          <tr>
            <th>col31</th>
            <th>col32</th>
            <th>col33</th>
          </tr>
        </thead>        
        </tbody>
      </table>
  </div>

</body>

</html>

Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице

Ответы