Need to scrollbar overlap with data in css

Question

I have one table data. there thead is fixed. I have added scroll only for tbody

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

SO here, thead and tbody is mismatching in alignment because of scrollbar. Scrollbar takes some widtin tbody

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

It is giving like this. how to avoid this?

i think padding from right (17px) on last thead cell should do the trick, or not? — BeardedMan, Jun 24 '16 at 07:24
@Mohaideen, it might be helpful : [**JsFiddle**](http://jsfiddle.net/hashem/crspu/555/) — Rohit Goyani, Jun 24 '16 at 07:29
I think, padding from right should be enought, something like [this](https://jsfiddle.net/5dv99tde/1/)? — BeardedMan, Jun 24 '16 at 07:31
@RohitGoyani, i need to do it on css. because it is a angularjs table. i dont want use jquery — Mohaideen, Jun 24 '16 at 07:48
can u tell exactly whats the problem couldn't understand @Mohaideen — Gayathri Mohan, Jun 24 '16 at 07:59

score 0 · Answer 1 · edited Jun 24 '16 at 08:25

Hi just replace the style

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;
}

Check on JsFiddle

score 0 · Answer 2 · answered Jun 24 '16 at 08:51

Well try this below code, I have added width to your th and td which align them perfectly, but on mobile device you have to use media queries and reduce the width of th, as below.

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

Align your text according as you want them to be.

Need to scrollbar overlap with data in css

2 Answers2