Question

我有一张桌子。

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

enter image description here

Answer 1

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

Answer 2

th{
width:200px;
}
td{
width:200px;    
}

您可以为th和td定义特定宽度并使它们相等，因此它们将对齐并且内容将可滚动。

更新了小提琴：http://jsfiddle.net/rc2xkfrw/1/

Answer 3

你可以这样做。 #scrol {

            width: 408px;
            max-height: 88px;
            overflow-y: scroll
        }

你可以根据你的要求改变最大高度。

Answer 4

我将此脚本用于

的设置大小

  var $table = $('table.scroll'),
  $bodyCells = $table.find('tbody tr:first').children(),
  colWidth;

    // Adjust the width of thead cells when window resizes
    $(window).resize(function () {
        // Get the tbody columns width array
        colWidth = $bodyCells.map(function () {
            return $(this).width();
        }).get();

        // Set the width of thead columns
        $table.find('thead tr').children().each(function (i, v) {
            $(v).width(colWidth[i]);
        });

        // Set the width of thead columns
        $table.find('tfoot tr').children().each(function (i, v) {
            $(v).width(colWidth[i]);
        });
    }).resize(); // Trigger resize handler

并设置样式

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

将滚动条添加到表格

4 个答案: