This maybe a simple question but I am new so How can i make my header in table fixed? I have tried using display:block for tableheader and tablebody but as responsive option for table is'checked' so it makes two scrollbars appear, one for table as a whole and one for tablebody. Thanks in advance.
The base config for a Bootstrap responsive table is a DIV around a table.
<div class="table-responsive">
<table class="table">
It creates a horizontally overflowed DIV. There is no CSS on the TH or TBODY. That would seem like something you have added.
I'm not sure what kind of content you are trying to set at the header but if it's not really header column content you might just want to put a div above the table that contains you static header content and not have it be part of the table maybe?
Saj
If it's any consolation, seems to me that most tables end up with the horizontal and vertical scrollbars when on a phone. I've yet to see one that doesn't, so I really don't think it's going to matter much. Bout the only way you're going to accomplish "no" scrollbar is to specify the height, and to adjust your text size accordingly so it fits perfectly into the phone size. Can be done, but truly I don't think it's all that much of a problem. Most people will be smart enough to move the screen over on their phone if it looks like it's going off the side a bit, and it's usually not all that much.