CSS表凍結的第一列與行的高度不一樣

試圖凍結表的第一列，我設法這樣做了，但我似乎無法對齊第一個單元格的高度和其餘部分行，如下所示 CSS表凍結的第一列與行的高度不一樣

這裏是一個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; 

}

來源

2017-07-06 WebQube

https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left -column-and-scrollable-body – bhv

@bhv他總是複製你標記的問題的答案。這是不一樣的。他已經有一個固定的表頭，但高度不符合列高。 – DomeTune

@DomeTune是否在嘗試這種方式 - 它看起來像是HTML中的問題，而不是CSS。 – bhv

你的問題是column和fixed rowhead的不同高度。

帶有position-absolut的HTML元素只能獲得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>

來源

2017-07-06 10:44:00 DomeTune

CSS表凍結的第一列與行的高度不一樣

回答

相關問題