Border top cuts text printed vertically in header

Question

I am having trouble as border-top line cuts printed text in halt, the rest of the text prints out of the top border.

My table has organized this way:

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>  

The only trouble I am having is border-top should be as height as the text is long ?

How I can fix this, any help? Tried multiple options it doesnt work