Верхняя граница обрезает текст, напечатанный вертикально в заголовке

Question

У меня возникли проблемы, так как верхняя граница рамки обрезает напечатанный текст с остановкой, а остальная часть текста выводится за верхнюю границу.

Моя таблица организована следующим образом:

table.rotate-table-grid{box-sizing: border-box;
border-collapse: collapse;}
 .rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th {
  border: 1px solid #ddd;
  position: relative;
  padding: 10px;
}
.rotate-table-grid th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-top:200px;
}
thead{
    border-top: no-border;
}

<table class="table table-bordered rotate-table-grid">
    <thead> 
        <tr id="groups">
            <th class="rotate" >Company</th>                                
            <?php foreach($stages as $stage){  
                ?> 
                <th class="rotate" ><div><span><?php echo $obuka['stageName'];?></span></div></th> 
            <?php } ?>    
        </tr>
    </thead>  

Единственная проблема, которую я испытываю, это то, что border-top должен быть такой же высоты, как текст длинным ?

Как я могу это исправить, любая помощь? Перепробовал несколько вариантов не работает