Question

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

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

如果我没有指定一个tablesorter主题，那么该表会显示我期望（和期望）的两列大小以适合它们包含的数据。

但是，如果我确实指定了一个tablesorter主题，则表格宽度固定在浏览器窗口的宽度上，每列占用该空间的一半。结果通常是不自然的宽列，难以阅读，因为文本相距太远。

我已经嗅过了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

每个主题将表格宽度设置为100％。这会扩展表以适合其父容器，浏览器会自动调整列宽。

要覆盖此内容，请执行以下一个：

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

在HTML（demo）

中定义列宽

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

使用标题类名称定义每列的列宽，或使用css :nth-child()选择器（demo）

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

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

使用tablesorter主题

1 个答案: