Ширина столбцов с Tablesorter + filter

При использовании темы defaults csstercss, если я не буду устанавливать ширину таблицы, я получаю красивую таблицу со всеми столбцами, идеально настроенными на самое длинное поле. НО, если я добавлю виджет фильтра, все столбцы будут намного шире, чем раньше, с большим количеством пустого пространства. Иногда текстовые столбцы разбиваются, а другие выглядят почти пустыми.

Можно ли избежать этого поведения? Спасибо!

Ответ 1

Входные параметры фильтра зависят от браузера, версии и вашей ОС. Поэтому простое добавление ввода в ячейку таблицы будет растягивать его до такого размера. Но вы можете установить max-width или width с помощью css.

Я обновил демонстрацию, которую вы поделили, с этим css, чтобы показать, как стиль темы можно переопределить:

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

Если вы хотите, чтобы столбцы были более узкими, просто установите ширину ввода как размер пикселя (demo):

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

Обновление: если вам нужны разные входы ширины, попробуйте этот 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;
}

где 4 in 4n - это количество столбцов в таблице (один-на-индекс)

Ответ 2

Вы можете изменить размер каждого текстового поля, используя следующий стиль

#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 - идентификатор таблицы)

Ответ 3

Если у вас есть неразрывные строки в данных таблицы, вам может потребоваться изменить:

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;
}

(это работало для меня в Chrome и IE11)

Ответ 4

Другой способ избавиться от некоторого пустого пространства - установить ширину до 100%

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