Question

我正在尝试使用CSS在Bootstrap表上创建一个固定的标头。

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>看起来不错，滚动效果很好。但<thead>元素与<tbody>不对齐。

我该如何解决这个问题？

这是如下所示的屏幕：

谢谢！

Answer 1

以下适用于比IE9更新的浏览器，要使其在旧版浏览器中运行，您需要使用固定列宽度unfortunatley。资料来源：Source page for my answer

LOCAL_LDLIBS += -Ljni/libs $(patsubst jni/libs/lib%.a,-l%,$(wildcard jni/libs/lib*.a))

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

Answer 2

尝试删除此部分：

_CrtDumpMemoryLeaks

Answer 3

我在之前的stackoverflow帖子中找到了解决方案。 Scrollable table with fixed header in bootstrap在第二条评论中提出解决方案。

另一个解决方案： How to display scroll bar onto a html table

Bootstrap表固定标题与问题对齐

3 个答案: