标题中的单个列过滤。如何单独更改每列的搜索过滤器文本框的宽度？

Question

在我的JavaScript代码中，为所有搜索文本框设置了一个样式宽度值，我无法逐个调整它们的大小。

$('#detailed thead th').each( function () {
    var title = $('#detailed thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" class="popoverData" data-content="Please enter a '+title+'" rel="popover"' +
        ' data-placement="bottom" data-trigger="hover" style="width:80;" placeholder="'+title+'" />' );

Answer 1

您可以通过简单的CSS设置单个<input>的样式：

#detailed thead th:nth-child(1) input {
  width: 30px !important;
  max-width: 30px !important;
}

#detailed thead th:nth-child(3) input {
  width: 80px !important;
  max-width: 80px !important;
}

等等。如果您发现问题（我不指望），请设置autoWidth: false。