html - 向表格添加滚动条

Question

我有一张有 thead 的 table 。

 <table style="width: 100%; height: 420px; min-width: 500px" class="table-bordered table-condensed table-striped">
<thead>
    <tr>
        <th>امکانات</th>
        <th>قیمت </th>
        <th>موجود </th>
        <th>اطلاعات بیشتر</th>
    </tr>
</thead>
<tbody>
    @{
        foreach (var product in Model.AllProduct)
        {
        <tr>
            <td>@product.Title</td>
            <td class="text-center">@product.Price.ToString("##,###")</td>
            <td class="text-center">
                @product.IsValid
            </td>
            <td class="text-center">
                @product.Description
            </td>

        </tr>
        }
    }
</tbody>

我想给这个表格添加滚动条。

我添加了这个样式。

 <style>
    tbody {
        height: 400px;
        overflow: auto;
        display: block;
    }

    thead > tr {
        position: relative;
        display: inline-table;
    }
</style>

它是向表格添加滚动条，但 th 的宽度未设置为列。

当我删除此样式时，th 大小就可以了。

http://jsfiddle.net/ArGorgin/rc2xkfrw/

Answer 1

围绕表格创建 div 元素并定义其高度，并为其设置 overflow: auto;。然后表格将是可滚动的并且标题列与内容位于相同的位置。这个解决方案有一个小问题，因为当你向下滚动时，标题也会滚动，如果不向上滚动，用户将无法看到它们。