0

当您在 Footable 中有多页数据时，列宽会随着您翻阅数据而发生变化，具体取决于在任何给定时间每列中显示的内容。这很丑陋。

我认为我的客户的要求意味着我不会有响应表，但也许有我看不到的方法。

Footable 在客户端处理分页。从技术上讲，应该可以从第一页“锁定”列宽，并强制它在整个数据中保持不变。不过，我认为 Footable 没有这个选项。

$(function () {
    $('.footable').footable();
});

这个 jsfiddle说明了这个问题（jsFiddle CSS 有点干扰我的，因为它也有 Footable 类）。

我可以在 % 中指定列的宽度 - 即使在视口缩小时隐藏列，这似乎也有效。

有没有人有另一个/更好的建议？

4

1 回答 1

1

我无法重现您的问题，并且 jsfiddle 没有分页脚注。

尽管如此，当我在 AJAX 调用后生成表格内容时，我仍然遇到了类似的列宽问题。我找到的解决方案是将一个类应用于 nTH 列中的每个单元格，然后定义宽度 = max-width min-width。

我已在您的主题标题中添加了一个类，并为此列定义了 css ...

http://jsfiddle.net/bgil2012/gHsdE/

<table class="footable" data-page-size="5">
    <thead>
        <tr>
            <th data-toggle="true">Product</th>
            <th data-hide="phone">Study Id</th>
            <th class="study-title" data-hide="phone">Study Title</th>
            <th class="column_condition" >Condition</th>
            <th>Results</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tysabri</td>
            <td>001-06-NAT</td>
            <td class="study-title">ENER-G Tysabri fatigue and cognition</td>
            <td class="column_condition" >Multiple Sclerosis</td>
            <td>CSR Synopsis</a>
            </td>
        </tr>

CSS：

.study-title {
    max-width: 20px;
    min-width: 20px;
    width: 20px;
}
于 2014-02-11T06:38:59.897 回答