Spaltenbreite mit Tablesorter + Filter

Question

Wenn ich das Tabellenschema tablesorter css benutze, bekomme ich eine schöne Tabelle mit allen Spalten, die perfekt an das längste Feld angepasst sind. ABER, wenn ich Filter Widget hinzufügen, erscheinen alle Spalten viel breiter als zuvor, mit viel Leerplatz. Manchmal sind Textspalten umbrochen, während andere fast leer aussehen.

Kann dieses Verhalten vermieden werden? Vielen Dank!

Answer 1

Die Größe der Filtereingänge hängt vom Browser, der Version und Ihrem Betriebssystem ab. Wenn Sie also einfach eine Eingabe in eine Tabellenzelle einfügen, wird sie auf diese Größe erweitert. Aber Sie können eine max-width oder width mit CSS einstellen.

Ich habe updated the demo Sie geteilt, mit diesem CSS zu zeigen, wie das Thema Set-Stil außer Kraft gesetzt werden kann:

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

Wenn Sie die Spalten schmaler wollen, nur die Eingangsbreite als Pixelgröße eingestellt (demo):

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

---

Update: wenn Sie unterschiedliche Breite Eingänge benötigen, versuchen Sie diese 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; 
} 

wo die 4 in 4n die Anzahl der Spalten in der Tabelle (one-based-Index)

Answer 2

Eine andere Möglichkeit, einen leeren Raum, um loszuwerden, ist die Einstellung der Breite auf 100%

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

Answer 3

Wenn Sie ungebrochene Strings in Ihrer Tabelle Daten haben, können Sie versuchen müssen zu ändern:

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

an:

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

(dies ist für mich in Chrome und IE11)

Answer 4

Sie Größe jeden Text boxt ändern können den folgenden Stil

#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 ist die ID der Tabelle)

mit