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!

Sidecar

Can you please share an example? You can use this demo as a basis for your code. – Danyluk

Here I removed the css theme to avoid the width:100% parameter. This would be the desired column width distribution. But when I add the filter widget, see it here, column widths are too long and don't fit the fields. – Sidecar

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)

Danyluk

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)

Easternmost

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)

Waterer

Answer 4

Another way to get rid of some empty space is setting the width to 100%

.tablesorter .tablesorter-filter {
    width: 100%;
}

Galvanometer