【发布时间】：2015-08-10 23:09:55
【问题描述】：
我正在使用带有 Kendo UI 的 Bootstrap。我正在寻找创建一个响应式表格。
Bootstraps 文档说只需用 .table-responsive 类包装 .table。
通过将任何 .table 包装在 .table-responsive 中来创建响应式表格 使它们在小型设备上水平滚动（低于 768 像素）。什么时候 在任何大于 768px 宽的东西上查看，您将看不到任何 这些表的区别。
Source: Bootstrap Documentation
不幸的是，这在使用 Kendo UI 的网格时似乎不起作用。
在下面的示例中，我将 .table 类应用到我的 Kendo 网格中，并按照文档使用 .table-responsive 类对其进行包装。
长话短说，我的表没有响应。容器似乎是，但没有水平滚动。有谁知道解决这个问题的方法？
我的代码：
<div class="col-md-10 col-md-offset-1 table-responsive">
@(Html.Kendo().Grid<HolsteinWebsite_Herdbook.Models.MainAwardsModel>()
.Name("TopClassifyingCows_ReportGrid")
.Columns(columns =>
{
columns.Bound(c => c.tccGrid.animalName);
columns.Bound(c => c.tccGrid.classValue).Width(80);
columns.Bound(c => c.tccGrid.score).Width(80);
columns.Bound(c => c.tccGrid.sireName);
columns.Bound(c => c.tccGrid.owners);
})
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Grid"))
)
.HtmlAttributes(new { @class = "table" })
)
</div>
生成的代码：
...
<table class="table" role="grid">
<colgroup>
<col>
<col style="width:80px">
<col style="width:80px">
<col>
<col>
</colgroup>
<tbody>
<tr class="k-no-data">
<td colspan="5"></td>
</tr>
</tbody>
</table>
...
【问题讨论】：
标签： jquery css twitter-bootstrap kendo-ui responsive-design