Bootstrap table fixed header align with issue

Question

I am trying to create a fixed header on Bootstrap table with CSS.

CSS

table.scroll tbody, table.scroll thead {
    display: block;
}

table.scroll tbody {
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

HTML

<table id="standart_list" class="table table-bordered scroll">
    <thead>
        <tr>
            <th>Standart Kodu</th>
            <th>Standart Tanımı</th>
            <th>Standart(Asgari Şart)</th>
            <th>Standart Durum Karşılanıyor Mu?</th>
            <th>Mevcut Durum</th>
            <th>Açıklama</th>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="#7fffd4">
            <td>
                ADLİ TIP
            </td>
        </tr>
        <tr>
            <input type="hidden" name="brans_2882" value="2">
            <td>
                2.1.1
            </td>
            <td style="max-width: 600px">
                EĞİTİCİ SAYISI
            </td>
            <td>
                1
            </td>
            <td>
                <select name="select_2882" id="select_2882" class="form-control">
                    <option value="1">Evet</option>
                    <option value="0" selected="">Hayır</option>
                </select>
            </td>
            <td>
                <input type="text" name="input_2882" id="input_2882" value="0" class="form-control mevcut_durum numeric" required="">
                <span class="errmsg"></span>
            </td>
            <td>
                <textarea name="text_2882" id="text_2882" class="form-control aciklama" required="">bu büyüklüğe</textarea>
            </td>
        </tr>
    </tbody>
</table>

<tbody> looks good and scrolling works. But <thead> elements do not align with <tbody>.

How can I solve this?

Here is screen which looks as described:

Thanks!

I fixed the formatting a bit, you might spot the problems yourself now. — Tom, Oct 10 '15 at 10:36

score 0 · Answer 1 · edited May 23 '17 at 10:27

The below works on browsers newer than IE9, to get it to work in older browsers you will need to use fixed column widths unfortunatley. Source: Source page for my answer

table {
        width: 100%;
    }

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

score 0 · Answer 2 · edited Oct 10 '15 at 12:10

0

Try removing this part:

table.scroll tbody,
table.scroll thead { display: block; }

edited Oct 10 '15 at 12:10

Drenmi

8,492
4
42
51

answered Oct 10 '15 at 11:23

Nandu Hulsure

123
1
7

As you can see ,its not aligned width tbody. – codeheroo Oct 10 '15 at 11:25
where is the fiddler link? – codeheroo Oct 10 '15 at 11:35
If I remove this, table not scrolling – codeheroo Oct 10 '15 at 11:37
I think you have to go for javaScript to fix this issue . i found below on stack overflow http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – Nandu Hulsure Oct 10 '15 at 12:04

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

I found the solution in a previous stackoverflow post. Scrollable table with fixed header in bootstrap with solution fiddle in second comment.

Another solution: How to display scroll bar onto a html table

edited May 23 '17 at 12:14

Community

1
1

answered Oct 10 '15 at 11:26

I added many rows but it doesnt help me.If we remove display block then scroll bar won't show. – codeheroo Oct 10 '15 at 15:06
Dear friends , this scroll normal page scroll. I want to fixed table header.And only table body has scroll.Thanks your effort but this is not solution – codeheroo Oct 10 '15 at 15:24
Sorry for my previous posts and comments. I misunderstood you. I deleted the comments and edited the answer. Found solution in another s.o. post. – Oct 10 '15 at 23:18

score 0 · Answer 4 · answered Jun 09 '23 at 09:19

0

Just add this line of code in your tabel tag, it'll fix the issue

<table data-toggle="table" id="standart_list" class="table table-bordered scroll">[enter image description here][1]

answered Jun 09 '23 at 09:19

C. Vishwanath

1

Bootstrap table fixed header align with issue

4 Answers4