Muss Scrollbar Überlappung mit Daten in CSS

Question

Ich habe eine Tabelle Daten. Dort ist das Auge fixiert. Ich habe nur hinzugefügt Rolle für tbody

tbody{ 
display: block; 
    height: 102px; 
    overflow-y: auto; 
} 

SO hier, thead und tbody ist wegen der Scrollbar in Ausrichtung unpassend. Scrollbar dauert einige widtin tbody

https://jsfiddle.net/MohaideenIsmail/6hm2oaLe/

Es ist wie diese geben. Wie vermeide ich das?

Answer 1

Hallo ersetzen Sie einfach den Stil

CSS

table { 
    /* width: 100%; */ /* Optional */ 
    /* border-collapse: collapse; */ 
    border-spacing: 0; 
    border: 2px solid black; 
}[![enter image description here][1]][1] 

table tbody, 
table thead { display: block; } 

thead tr th { 
    height: 30px; 
    line-height: 30px; 
    /* text-align: left; */ 
} 
table > thead > tr > th:not(first-child){ 
       min-width:145px; 
      } 
      table > tbody > tr > td:not(first-child) { 
       min-width:145px; 
      } 

table tbody { 
    height: 60px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

tbody { border-top: 2px solid black; } 

tbody td, thead th { 
    border-right: 1px solid black; 
} 

tbody td:last-child, thead th:last-child { 
    border-right: none; 
} 

prüfen auf JsFiddle

Answer 2

dies unter Code Nun versuchen, ich habe Ihre th und td zusätzliche Breite, die ausrichten sie perfekt, aber auf dem mobilen Gerät müssen Sie Medienabfragen verwenden und die Breite von th verringern, wie unten.

table > thead > tr > th{ 
    width:9.15%; 
    text-align:left; 
} 
tbody > tr > td{ 
    width:5%; 
    text-align:left; 
} 

Richten Sie Ihren Text so aus, wie Sie ihn haben möchten.