我試圖用CSS在引導表上創建一個固定的標題。

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

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

超文本標記語言

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

& lttbody & gt看起來不錯，滾動工作。但是& ltthead & gt元素沒有與& lttbody & gt。

我該如何解決這個問題？

這是看起來像描述的屏幕:

謝謝！

# # #下面的代碼可以在比IE9新的瀏覽器上運行，不幸的是，要讓它在舊的瀏覽器上運行，你需要使用固定的列寬。 來源:我的答案的來源頁面

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

# # #嘗試移除此部分:

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

# # #我在以前的stackoverflow帖子中找到了解決方案。 引導程序中帶有固定標題的可滾動表格，第二條注釋中有解決方案。

另一個解決方案: 如何在html表格上顯示滾動條

# # #只需將這行代碼添加到您的tabel標簽中，就可以解決這個問題

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