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

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

您可以设置个人 <input> 的样式通过简单的 CSS 实现:

#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 。