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)