The fixed header of the Bootstrap array aligns with & lt; tbody & gt; problem

advertisements

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!


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>