Columns width with Tablesorter+filter

Question

While using the tablesorter css default theme, if I avoid to set the table width I get a nice table with all columns perfectly adjusted to the longest field. BUT, If I add filter widget, all columns appear much wider than before, with a lot of empty space. Sometimes text columns are wraped, while others look nearly empty.

Can this behavior be avoided? Thanks!

Answer 1

The filter inputs inherent size depends on the browser, the version and your OS. So simply adding an input into a table cell will stretch it to that size. But you can set a max-width or width using css.

I've updated the demo you shared, with this css to show how the theme set style can be overridden:

.tablesorter, .tablesorter .tablesorter-filter {
    width: auto;
}

If you want the columns narrower, just set the input width as a pixel size (demo):

.tablesorter {
    width: auto;
}
.tablesorter .tablesorter-filter {
    width: 50px;
}

---

Update: if you need different width inputs, try this css (demo):

.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter {
    width: 80px;
}
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter {
    width: 40px;
}

where the 4 in 4n is the number of columns in the table (one-based-index)

Answer 2

You can change size of each text boxe using the following style

#sites_list_table .tablesorter-filter-row td>[data-column="1"] {
    width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="4"] {
    width: 100px;
}
#sites_list_table .tablesorter-filter-row td>[data-column="6"] {
    width: 100px;
}

(#sites_list_table is the id of the table)

Answer 3

If you have unbroken strings in your table data you may need to try changing:

table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}

To:

table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
    max-width:400px;
    word-wrap:break-word;
}

(this worked for me in Chrome and IE11)