使用 tablesorter 主题时如何获得自动调整大小的列

Question

我有一个简单的 Web 应用程序，它使用 jQuery (v1.12.4) 和 tablesorter 插件 (v2.28.15)。

在应用程序的一页上，我显示了一个 HTML table，其中包含内容不是特别宽的两列。

如果我没有指定 tablesorter 主题，table 会按照我的预期（和期望）显示，两列的大小适合它们包含的数据。

但是，如果我确实指定了一个 tablesorter 主题，table 宽度固定为浏览器的宽度 window 并且每列得到该宽度的一半 space.结果通常是不自然的宽栏，因为文本相距太远而难以阅读。

我仔细阅读了 tablesorter github 文档，但没有找到任何要点。

我尝试了不同的 tablesorter 主题，发现每个主题都有相同的行为。

在使用 tablesorter 主题时，是否有办法调整列的大小？

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="jQuery/tablesorter-master/css/theme.blue.css">
</head>

<body>
    <table id="table1">
        <thead>
            <tr>
                <td>Column1</td>
                <td>Column2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>r1c1</td>
                <td>r1c2</td>
            </tr>
            <tr>
                <td>r2c1</td>
                <td>r2c2</td>
            </tr>
            <tr>
                <td>r3c1</td>
                <td>r3c2</td>
            </tr>
        </tbody>
    </table>

    <script src="jQuery/jquery-1.12.4.min.js"></script>
    <script src="jQuery/tablesorter-master/js/jquery.tablesorter.js"></script>

    <script>
        $(document).ready(function() {
            $("#table1").tablesorter({
                theme: "blue",
            });
        });
    </script>
</body>

</html>

Answer 1

每个主题都将 table 宽度设置为 100%。这会扩展 table 以适应其 parent 容器，并且浏览器会自动调整列宽。

要覆盖它，请执行以下其中一项：

从所选主题中删除 width: 100% 定义。
添加 table.tablesorter { width: auto; } 定义以覆盖行为 (demo)

定义 HTML (demo)

中的列宽

<th style="width: 50px;">Numeric</th>
<th style="width: 50px;">Animals</th>

使用 header class 名称或使用 css :nth-child() 选择器 (demo) 定义每列的列宽

<th class="numbers">Numeric</th>

/* Numeric column */
.numbers { width: 50px; }
/* Animals column */
table th:nth-child(3) { width: 50px; }

使用 tablesorter 主题时如何获得自动调整大小的列

How to get automatically sized columns when using tablesorter theme

jquery

tablesorter