How to get automatically sized columns when using tablesorter theme

I have a simple web application that uses jQuery (v1.12.4) and the tablesorter plugin (v2.28.15).

On one page of the application I am displaying an HTML table that contains two columns where the content is not particularly wide.

If I do NOT specify a tablesorter theme, the table displays as I expect (and desire) with the two columns sized to fit the data that they contain.

However, if I do specify a tablesorter theme, the table width is fixed at the width of the browser window and each column gets half of that space. The result is usually unnaturally wide columns that are hard to read because the text is too far apart.

I have sniffed through the tablesorter github documentation and not found anything on point.

I have experimented with different tablesorter themes and see the same behavior with each.

Is there a way to get sized-to-fit columns while using a tablesorter theme?

Sample code:

<!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>

Solution

Each theme sets the table width to 100%. This expands the table to fit its parent container and the browser automatically adjusts the column widths.

To override this, do one of the following:

Remove the width: 100% definition from the selected theme.
Add a table.tablesorter { width: auto; } definition to override the behavior (demo)

Define the column widths in the HTML (demo)

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

Define the column widths for each column using header class names or use the css :nth-child() selector (demo)

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

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