CSSテーブルの固定された最初の列の高さが行と同じではない

Question

テーブルの最初の列をフリーズしようとしましたが、最初のセルの高さと残りの部分の高さを揃えることができませんでした行、ここで ここ

示すようにjsfiddle

.headcol { 
    position: absolute; 
    width: 5em; 
    left: 0; 
    top: auto; 
    border-top-width: 1px; 
    /*only relevant for first row*/ 
    margin-top: -1px; 
    /*compensate for top border*/ 
    background: white; 
    border-right: 4px solid black; 

} 

Answer 1

あなたの問題は、columnとfixed rowheadの異なる高されました。

HTML-Elements position-absolutの場合、innerHTMLの高さしか得られません。

私はちょっとあなたのcolumns & headersにmin-heightを追加しました。より良いスタイルのためにmin-widthと同様に。あなたが変更することができJSFiddle here.

.grades-table { 
 
    overflow-x:scroll; 
 
    overflow-y:visible; 
 
    margin-left: 5em; 
 
} 
 

 
.grades-header, 
 
.grades-column { 
 
    min-width: 150px; 
 
    min-height: 38px; 
 
    text-align: center; 
 
} 
 

 
.headcol { 
 
    position: absolute; 
 
    width: 5em; 
 
    min-height: 38px; 
 
    left: 0; 
 
    top: auto; 
 
    border-top-width: 1px; 
 
    margin-top: -1px; 
 
    background: white; 
 
    border-right: 4px solid black; 
 
} 
 

 
.headcol-text { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div class="grades-table"> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="headcol">students</th> 
 
     <th class="grades-header">01_getting_started</th> 
 
     <th class="grades-header">02_courses</th> 
 
     <th class="grades-header">03_tasks</th> 
 
     <th class="grades-header">04_run_student</th> 
 
     <th class="grades-header">05_fetching_input</th> 
 
     <th class="grades-header">06_feedback</th> 
 
     <th class="grades-header">07_advance_feedback</th> 
 
     <th class="grades-header">08_archive</th> 
 
     <th class="grades-header">09_ssh_debug</th> 
 
     <th class="grades-header">10_environments</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="grades-row"> 
 
     <th class="headcol"> 
 
     <div class="headcol-text"> 
 
      student1 
 
     </div> 
 
     </th> 
 
     <td class="grades-column"><a href="#">01</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">02</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">03</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">04</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">05</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">06</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">07</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">08</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">09</a><br><a href="#">X days ago</a></td> 
 
     <td class="grades-column"><a href="#">10</a><br><a href="#" href="#">X days ago</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div>