Bootstrap 引导表固定标题与问题对齐< tbody>

q5lcpyga 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(4)|浏览(143)

我正试图创建一个固定的头引导表与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>看起来不错，滚动也能工作。但是<thead>元素不与<tbody>对齐。
我该如何解决这个问题？
下面是屏幕，看起来如所述：

谢谢!

twitter-bootstrap

来源：https://stackoverflow.com/questions/33052949/bootstrap-table-fixed-header-align-with-tbody-issue

4条答案

按热度按时间

rdlzhqv91#

下面的工作在比IE9新的浏览器上，要让它在旧的浏览器中工作，不幸的是，你需要使用固定的列宽。来源：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>

赞(0）回复(0）举报 2023-06-20

30byixjq2#

尝试删除此部分：

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

赞(0）回复(0）举报 2023-06-20

imzjd6km3#

我在之前的stackoverflow文章中找到了解决方案。Scrollable table with fixed header in bootstrap在第二条评论中使用解决方案。
另一个解决方案：How to display scroll bar onto a html table

赞(0）回复(0）举报 2023-06-20

pu82cl6c4#

只需在tabel标记中添加这行代码，它就可以解决这个问题

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

赞(0）回复(0）举报 2023-06-20

我来回答

Bootstrap 引导表固定标题与问题对齐< tbody>

4条答案

相关问题

热门标签

最新问答