Footable - 客户希望页面之间的列宽保持不变答案

【问题标题】：Footable - client wants column width to remain constant between pagesFootable - 客户希望页面之间的列宽保持不变
【发布时间】：2014-02-06 02:44:09
【问题描述】：

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

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

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

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

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

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

有人有其他/更好的建议吗？

【问题讨论】：

标签： pagination column-width footable

【解决方案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;
}

【讨论】：

谢谢。我最终以 % 为单位给出了每列的宽度。这适用于不同屏幕分辨率的页面。不知道为什么 jsFiddle 不再分页。我不打算调查。